使用HTML5 Canvas为图片填充颜色和纹理的教程

var context = canvas.getContext("2d");

context.rect(200,100,400,400);

//添加渐变线 var grd = context.createLinearGradient(200,300,600,300);

//添加颜色断点

grd.addColorStop(0,"black"); grd.addColorStop(0.5,"white");

grd.addColorStop(1,"black");

//应用渐变 context.fillStyle = grd;

context.fill();

}

</script> </body>

</html>

运行结果：
2016321112313533.jpg (850×500)

我觉得有必要做一个图解，方便大家一次性理解渐变。
2016321112349410.jpg (850×500)

为了方便理解，建议把渐变线看成是一个有向线段。如果熟悉PS等绘图工具，用过其中的渐变色设置，应该会很好理解。
这里渐变线的起点和终点不一定要在图像内，颜色断点的位置也是一样的。但是如果图像的范围大于渐变线，那么在渐变线范围之外，就会自动填充离端点最近的断点的颜色。
这里配合两个补充函数再举一例。

绘制矩形的快捷方法

JavaScript Code复制内容到剪贴板

fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。 <!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8"> <title>填充线性渐变</title>
</head> <body>
3/8 首页上一页 1 2 3 4 5 6 下一页尾页