HTML5画布之颜色渐变方法（一）

马黑黑

在CSS3里，线性和放射状（圆形）渐变分别是 Lineargradient 和 Radialgradient，它们同样应用到HTML5的canvas中，通过两个JS方法：

线性：createLinearGradient()
放射：createRadialGradient()

这里只说说线性渐变的创建与应用。语法：

context.createLinearGradient(x0,y0,x1,y1);

参数解释：

x0 : 渐变开始点的 x 坐标
y0 : 渐变开始点的 y 坐标
x1 : 渐变结束点的 x 坐标
y1 : 渐变结束点的 y 坐标

设画笔句柄为 cst，则按下面的语句就能创建渐变区域并将渐变操作句柄授权给变量 mygrd：

let mygrd = cst.createLinearGradient(0,0,260,0);

这样的渐变参数如何理解？上例，是从着色对象的左边开始横向渐变至260px处，纵向颜色不变，因为结束点y1的值是0。但在此，仅规定了渐变区域，还没有颜色加持，这就需要用到 addColorStop() 方法，此方法规定渐变对象中的颜色和停止位置，语法如下：

addColorStop(stop,color);

stop参数在 0 到 1 之间，支持小数值，可以是 0 和 1，表示渐变中开始与结束之间的位置。渐变至少需要两种颜色，所以我们可以这样给渐变句柄加上多个颜色：

mygrd.addColorStop(0,"red");
mygrd.addColorStop(0.5,"green");
mygrd.addColorStop(1,"olive");

颜色的位置设定很关键，请在看实例时体会。然后，给 cst 画笔授权线条或边框色（strokeStyle)或填充色（fillStyle):

cst.strokeStyle = mygrd; // 边框色
cst.fillStyle = mygrd; // 填充色

最后就是根据需要设置好相关对象属性后画直线、矩形、圆或文本。这里我们试着画一个矩形：

cst.fillRect(10,10,200,50);

完整代码(添加了其它的内容）：

<canvas id="grd" width="400" height="280" style="border:1px solid;padding:10px;"></canvas>

<script>

let cs = document.getElementById('grd');
let cst = cs.getContext('2d');
let mygrd = cst.createLinearGradient(0,0,260,0);
mygrd.addColorStop(0,"red");
mygrd.addColorStop(0.5,"green");
mygrd.addColorStop(1,"olive");
cst.fillStyle = mygrd;
cst.strokeStyle = mygrd;
cst.fillRect(10,10,260,100);
//绘制文字
cst.font = "60px 微软雅黑";
cst.fillText("花潮论坛",20,180);
cst.strokeText("花潮论坛",20,260);

</script>

马黑黑

红影

这个讲了两个功能呢，图片的渐变和文字的简便。这个真好看

红影

cst.fillStyle = mygrd;
cst.strokeStyle = mygrd;

这两个命令就可以让实心的和空心的都按照mygrd设定的颜色进行渐变了。原来还可以这样。

红影

context.createLinearGradient(x0,y0,x1,y1)这个里面的结束点坐标很值得琢磨，例子里是只有横向颜色变化。若是没有后面的cst.fillRect(10,10,260,100);给出高度，回事怎样的结果？
若是x1=0 y1=260 就是沿着纵向颜色变化？若都是260就沿45度方向渐变么？

红影

createRadialGradient()是怎么用的？也举个例子？

马黑黑

红影 发表于 2022-3-1 19:27
createRadialGradient()是怎么用的？也举个例子？

已写专帖介绍

马黑黑

红影 发表于 2022-3-1 19:27
context.createLinearGradient(x0,y0,x1,y1)这个里面的结束点坐标很值得琢磨，例子里是只有横向颜色变化。 ...

线性渐变渲染区域给出渐变定位，实际上可以根据起始值和结束值得到CSS里给出角度的效果，这个要自行尝试体会。

红影

马黑黑 发表于 2022-3-1 19:35
已写专帖介绍

嗯嗯，看到了，黑黑真棒

红影

马黑黑 发表于 2022-3-1 19:40
线性渐变渲染区域给出渐变定位，实际上可以根据起始值和结束值得到CSS里给出角度的效果，这个要自行尝试 ...

嗯嗯，的确需要去试试，感受效果变化

小辣椒

红影 发表于 2022-3-1 19:24
cst.fillStyle = mygrd;
cst.strokeStyle = mygrd;

亲爱的，感觉你都会了呢

小辣椒

哇塞~~这个效果真漂亮

马黑黑

小辣椒 发表于 2022-3-1 22:11
哇塞~~这个效果真漂亮

不过这个真有难度额

马黑黑

红影 发表于 2022-3-1 21:59
嗯嗯，的确需要去试试，感受效果变化

嗯，动手是必须的

马黑黑

红影 发表于 2022-3-1 21:59
嗯嗯，看到了，黑黑真棒

果酱果酱

小辣椒

马黑黑 发表于 2022-3-1 22:22
不过这个真有难度额

所以我看了就感觉不会做

马黑黑

小辣椒 发表于 2022-3-1 22:27
所以我看了就感觉不会做

先了解了解吧

小辣椒

马黑黑 发表于 2022-3-1 22:31
先了解了解吧

我就看看，然后自己实习一下，只要能够想办法做进帖里面我就可以了

红影

小辣椒 发表于 2022-3-1 22:10
亲爱的，感觉你都会了呢

黑黑讲得很清楚呢，把没个句子的意思都介绍了啊

红影

马黑黑 发表于 2022-3-1 22:22
嗯，动手是必须的

黑黑总能带来新的东西