HTML5画布之颜色渐变方法（一）
本帖最后由 马黑黑 于 2022-3-1 13:26 编辑在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>
<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> 这个讲了两个功能呢，图片的渐变和文字的简便。这个真好看{:4_187:} 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
已写专帖介绍
嗯嗯，看到了，黑黑真棒{:4_187:} 马黑黑 发表于 2022-3-1 19:40
线性渐变渲染区域给出渐变定位，实际上可以根据起始值和结束值得到CSS里给出角度的效果，这个要自行尝试 ...
嗯嗯，的确需要去试试，感受效果变化{:4_187:} 红影 发表于 2022-3-1 19:24
cst.fillStyle = mygrd;
cst.strokeStyle = mygrd;
亲爱的，感觉你都会了呢{:4_199:} 哇塞~~这个效果真漂亮 小辣椒 发表于 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
亲爱的，感觉你都会了呢
黑黑讲得很清楚呢，把没个句子的意思都介绍了啊{:4_173:} 马黑黑 发表于 2022-3-1 22:22
嗯，动手是必须的
黑黑总能带来新的东西{:4_187:}