Canvas学习:渐变

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过前面的Canvas学习,了解到在Canvas中绘制图形时,使用strokeStylefillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值,比如#fffred之类。其实在Canvas中,除了给strokeStylefillStyle设置颜色之外,还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。

Canvas中的渐变和CSS的渐变也有点类似,分为线性渐变和径向渐变(也被称之为扩散性渐变)。CanvasRenderingContext2D对象中提供了两个方法:

  • CanvasRenderingContext2D.createLinearGradient():创建线性渐变
  • CanvasRenderingContext2D.createRadialGradient():径向渐变

那么在Canvas中如何使用渐变的方法,给绘制的图形或文本增强效果。

线性渐变

在Canvas中首先使用createLinearGradient()创建一个新的CanvasGradient对象,然后将它赋值给一个变量,这样就可以将变量运用给strokeStylefillStylecreateLinearGradient()使用语法如下:

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:指定渐变中颜色所在的相对位置,其接受一个01之间的值
  • color:指定渐变中的颜色

我们来看一个简单的例子:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/gradient.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部