火是用什么做的视频网站,北京爱空间装修公司,济宁网站建设排行,建立免费公司网站创建渐变的三种方法#xff1a; createLinearGradient() - 线性渐变 createRadialGradient() - 径向渐变#xff08;放射性渐变#xff09; createConicGradient() - 锥形渐变 这三种的核心观点都是#xff1a; 创建一个gradient对象#xff0c;然后调用addColorStop()方法…创建渐变的三种方法 createLinearGradient() - 线性渐变 createRadialGradient() - 径向渐变放射性渐变 createConicGradient() - 锥形渐变 这三种的核心观点都是 创建一个gradient对象然后调用addColorStop()方法给这个对象添加渐变色。 区别就是里面的形参数量、含义不一样需要注意。 有个特别需要注意的点 createPattern() - 图片画笔 你可以理解为这个方法就是创建一个新的画笔工具然后使用这个工具去进行绘画。 举个例子 let img new Image()img.src ./images/5.pngimg.onload () {// 创建重复元素对象 - repeat是CSS中的内容let png ctx.createPattern(img, repeat)// 类似于一个画笔ctx.fillStyle pngctx.fillRect(0, 0, 400, 400)} 这几个方法你可以想象成创建一个画笔。
不同的是有些是创建的时候就限制了画笔的大小。
比如说createLinerGradient()里面就有关于生效的距离 const gradient ctx.createLinearGradient(0, 0, 600, 400)gradient.addColorStop(0, red)gradient.addColorStop(0.5, yellow)gradient.addColorStop(1, blue)ctx.moveTo(0, 0)ctx.lineTo(400, 400)ctx.lineWidth 30ctx.strokeStyle gradientctx.stroke() 从上面的例子可以看出如果你的线条长度小于渐变色的宽度上文中渐变色的宽度是600但是线条的宽度是400那么渐变色有可能显示不全——丢失部分/全部蓝色渐变效果。
这是因为在gradient对象方法——addColorStop(0, 颜色)里面的0是指向量的长度它的长度是这个向量跟下一个向量之间的长度。
比如说例子中的就是0-0.5之间就是从红色渐变到黄色而0.5-1之间就是从黄色渐变到蓝色。 而有些则是不限制大小只看你后续使用画笔来干什么。
比如说例子1中的createPattern()就是看后续调用fillRect()的大小。 但如果你使用的是stroke()方法就只会剩下一个边框 今天就到这bye~
