我們希望得到如下效果:

首先準備畫布

// HTML <canvas width="500" height="375" id ="a"> </canvas>// JS // 獲取畫布的DOM元素 var a_canvas = document.getElementById("1"); // 獲取畫布的上下文元素(之后,就可以使用canvas的特性了) var ct = a_canvas.getContext("2d");

定義漸變的樣式

// JS var my_gra = ct.createLinearGradient(0, 0, 300, 0); my_gra.addColorStop(0, "black"); my_gra.addColorStop(1, "white"); // 線從(0, 0) 畫到 (300, 0) // 顏色從黑到白

使用自定義的樣式繪制矩陣

// JS ct.fillStyle = my_gra; ct.fillRect(0, 0, 300, 225); // fillRect表示從(0, 0) 開始畫一個寬300px,高225px的矩形

整體代碼

<canvas width="500" height="375" id="a"></canvas><script>(function draw_a() {var a_canvas = document.getElementById("a");var ct = a_canvas.getContext("2d");var my_gra = ct.createLinearGradient(0, 0, 300, 0);my_gra.addColorStop(0, "black");my_gra.addColorStop(1, "white");ct.fillStyle= my_gra;ct.fillRect(0, 0, 300, 225);})(); </script>

參考 《HTML5揭秘》P68

總結

以上是生活随笔為你收集整理的html5 --- 使用canvas画一个渐变矩形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。