溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用HTML5中canvas實現漸變文字效果的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
用HTML5中的canvas 實現漸變文字效果，需要用到的語法及參數設置如下，不清楚的小伙伴可以看看。
1、fillText( )
語法：context.fillText(text,x,y,maxWidth)
text表示需要在畫布上輸出的文本
x表示開始繪制文本的X軸坐標
y表示開始繪制文本的 Y軸坐標
maxWidth 表示允許的最大文本寬度，單位是像素，是一個可選值。
2、createLinearGradient( )
語法：context.createLinearGradient(x0,y0,x1,y1)
x0 表示漸變開始點的X軸坐標
y0 表示漸變開始點的Y軸坐標
x1 表示漸變結束點的X軸坐標
y1 表示漸變結束點的Y軸坐標
舉:1：制作一個普通文字（無顏色漸變），代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("學習使我快樂",10,50);
</script>
</html>效果圖如圖所示：
舉例2：制作一個漸變文字，具體代碼如下：
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","orange");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("have a nice day ",10,100);效果圖：
制作漸變文字時，首先要用createLinearGradient( )創建一個漸變，然后用fillStyle將漸變運用于文字上。
感謝各位的閱讀！看完上述內容，你們對用HTML5中canvas實現漸變文字效果的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
