<!DOCTYPE HTML>
<html>
<head>
<title>linearGradient</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
//创建渐变
var lingrad = cxt.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0,'#00ABEB');
lingrad.addColorStop(0.5,'#fff');
lingrad.addColorStop(0.5,'#66CC00');
lingrad.addColorStop(1,'#fff');
var lingrad2 = cxt.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.5,'#000');
lingrad2.addColorStop(1,'rgba(0,0,0,0)');
//指定渐变填充和描边样式
cxt.fillStyle=lingrad;
cxt.strokeStyle=lingrad2;
//绘制图形
cxt.fillRect(10,10,130,130);
cxt.strokeRect(50,50,50,50);
}
</script>
<body onLoad="draw()">
<canvas id="myCanvas" height="150" width="150" style="border:2px solid #F00;"></canvas>
</body>
</html>
显示效果如下：
【使用线性渐变来填充、描边。新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。createLinearGradient(x1,y1,x2,y2)，方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。创建出 canvasGradient 对象后，使用 addColorStop 方法上色。addColorStop(position, color) ，方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值。】
【实例展示了两种不同的渐变。第一种是背景色渐变，同一位置设置了两种颜色，也可以用这来实现突变的效果，就像这里从白色到绿色的突变。一般情况下，色标的定义是无所谓顺序的，但是色标位置重复时，顺序就变得非常重要了。所以，保持色标定义顺序和它理想的顺序一致，结果应该没什么大问题。第二种渐变，并没有从 0.0 位置开始定义色标，因为那并不是那么严格的。在 0.5 处设一黑色色标，渐变会默认认为从起点到色标之间都是黑色。最后说明，strokeStyle 和 fillStyle 属性都可以接受 canvasGradient 对象。】