收藏
评论

createLinearGradient纵向渐变


createLinearGradient在示例中给了一个从左至右的渐变, 但在实际项目中需要一个从上至下的透明渐变层.

于是按照API写了如下代码:

let grd = ctx.createLinearGradient(0, 0, 0, 60)


ctx.setGlobalAlpha(0.2)

grd.addColorStop(0, 'white')

grd.addColorStop(1, 'black')


ctx.setFillStyle(grd)

ctx.fillRect(0, 200, 260, 60)

在模拟器里的结果如图所示:


一片黑......



因为....createLinearGradient函数的起始坐标并不是画布的原点...而是你想要填充的起点坐标...

修改一下:

let grd = ctx.createLinearGradient(0, 200, 0, 60)


ctx.setGlobalAlpha(0.2)

grd.addColorStop(0, 'white')

grd.addColorStop(1, 'black')


ctx.setFillStyle(grd)

ctx.fillRect(0, 200, 260, 60)                    

效果如图:


但是效果还是不理想, 上面为什么会多一条白线?



因为....确实是从0,white 起步的啊...但是从视觉来说, 看上去很扎眼...于是再次修改:

let grd = ctx.createLinearGradient(0, 200, 0, 60)


grd.addColorStop(0, 'rgba(255, 255, 255, 0)')

grd.addColorStop(1, 'rgba(0, 0, 0, 0.2)')


ctx.setFillStyle(grd)

ctx.fillRect(0, 200, 260, 60)

最终结果如下:



其实是利用addColorStop中color的rgba透明度来实现'看不见'的白色.

PS: 这里还规避了一下之前设置透明度为0.2, 后期忘记还原透明度的风险


最后一次编辑于  2018-02-24  (未经腾讯允许,不得转载)
赞 1
收藏