特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
通过前面的Canvas学习,了解到在Canvas中绘制图形时,使用strokeStyle
和fillStyle
来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值,比如#fff
、red
之类。其实在Canvas中,除了给strokeStyle
和fillStyle
设置颜色之外,还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。
Canvas中的渐变和CSS的渐变也有点类似,分为线性渐变和径向渐变(也被称之为扩散性渐变)。CanvasRenderingContext2D
对象中提供了两个方法:
CanvasRenderingContext2D.createLinearGradient()
:创建线性渐变CanvasRenderingContext2D.createRadialGradient()
:径向渐变
那么在Canvas中如何使用渐变的方法,给绘制的图形或文本增强效果。
线性渐变
在Canvas中首先使用createLinearGradient()
创建一个新的CanvasGradient
对象,然后将它赋值给一个变量,这样就可以将变量运用给strokeStyle
和fillStyle
。createLinearGradient()
使用语法如下:
ctx.createLinearGradient(x1, y1, x2, y2)
也就是说createLinearGradient()
方法接受四个参数,分别代表渐变的起始点(x1, y1)
和渐变终点(x2, y2)
。起点和终点描述了所绘制渐变效果的长度、位置和方向。
前面也说过了,Canvas中的渐变和CSS的渐变非常类似,上面的内容我们只是通过createLinearGradient()
创建了CanvasGradient
对象,但并没有渐变的颜色,要是没有颜色,对于这个对象而言就没有太多的意义了。所以,在Canvas中,可以通过addColorStop
来定义渐变的颜色。
addColorStop
是Canvas中制作渐变效果不可缺少的一个属性,其使用语法如下:
gradient.addColorStop(position, color)
也就是说addColorStop
接受两个参数:
position
:指定渐变中颜色所在的相对位置,其接受一个0
至1
之间的值color
:指定渐变中的颜色
我们来看一个简单的例子:
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/gradient.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!