我們希望得到如下效果:

首先準備畫布

// 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