我们希望得到如下效果:
首先准备画布
// 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
