html5 --- > 使用canvas画一个渐变矩形

我们希望得到如下效果:

首先准备画布

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