HTML中canvas线性渐变的使用方法:

HTML中canvas线性渐变的使用方法:

canvas渐变分为两种 ,下面进行对线性渐变的讲解:
.线性渐变;
用法:
createLinearGradient(x1,y1,x2,y2)
添加颜色:
grad.addColorStop(位置,颜色) 位置表示颜色的停止位置
注意:
在添加颜色得时候,“位置”,由0-1之间得数字填写,"颜色"需要用双引号或者单引号包裹起来作为一个字符串使用;

参数值:
    x1:起点的 横坐标X1。
	y1:起点的 纵坐标Y1。
	x2:终点的 横坐标X2。
	y2:终点的 纵坐标Y2。
	注意:x1,y1组合来使用表示起点位置的坐标;
    	x2,y2组合来使用表示终点位置的坐标;

代码使用如下图所示:

实现效果如下图所示:

感谢您一直以来得信任与关注!