1回答

好帮手慕星星

2019-01-07

你好，使用createLinearGradient() 方法创建线性的渐变对象。

语法：context.createLinearGradient(x0,y0,x1,y1);

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

通俗说这个方法是改变渐变位置的，就是渐变从哪个位置开始，哪个位置结束。

而addColorStop() 方法规定 gradient 对象中的颜色和位置，需要配合createLinearGradient() 方法一起使用。

语法：gradient.addColorStop(stop,color);

stop    介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。    

color    在结束位置显示的 CSS 颜色值 。 

改变stop值改变的只是在渐变中，各部分颜色占据的位置。

例如：

代码是在（50，50）至(150,150)之间设置的渐变，addColorStop设置的是在这段区间内各部分颜色占据的位置。

自己可以再测试下，祝学习愉快！

0