溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細介紹了canvas繪制漸變矩形的方法，圖文詳解容易學習，配合代碼閱讀理解效果更佳，非常適合初學者入門，感興趣的小伙伴們可以參考一下。
<canvas> 標簽可以用來繪制圖形，但是要通過JavaScript腳本來實現效果，因為<canvas>標簽只是一個裝圖形的容器，效果的實現要借助JavaScript腳本。我們可以用canvas繪制直線，圓形，矩形，字符等等。
舉例1：用canvas繪制一個紅色矩形，具體步驟如下：
第一步：用document.getElementById( )找到 <canvas> 元素
第二步：用getContext("2d")創建 context 對象
第三步：fillStyle屬性可以設置矩形顏色，本例將其設置為紅色；fillRect(x,y,width,height) 方法可以繪制已填色的矩形，x表示矩形左上角的X軸坐標，y表示矩形左上角的Y軸坐標，width表示矩形的寬度，height表示矩形的高度
完整代碼如下：
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(25,10,150,80);
</script>效果圖：
舉例2：用canvas繪制一個漸變矩形，代碼如下所示：
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"orange");
grd.addColorStop(1,"red");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(25,10,150,80);
</script>createLinearGradient(x,y,x1,y1) 可以創建線性漸變，使用漸變時，必須使用兩種或者兩種以上的顏色
addColorStop()方法表示顏色停止，可以是0至1
用fillStyle設置矩形顏色，然后用fillRect(x,y,width,height)繪制矩形
效果如圖所示：
以上就是canvas繪制漸變矩形的方法，代碼詳細清楚，如果在日常工作遇到這個問題，希望你能通過這篇文章解決問題。如果想了解更多相關內容，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
