给canvas标签设置渐变遮罩

小程序海报渐变遮罩绘制

最新推荐文章于 2024-08-10 21:54:58 发布

原创最新推荐文章于 2024-08-10 21:54:58 发布 · 319 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在小程序中创建海报，并使用Canvas API在海报上绘制带有透明度变化的渐变遮罩效果。通过设置渐变起始点和结束点，调整不同位置的透明度实现视觉效果。

小程序上画海报并在图上画渐变的遮罩

 
var lineGradient = ctx.createLinearGradient (0, 0, 0, 312); // 0,0 从0，0 坐标 画到0，312坐标
        lineGradient.addColorStop(0, 'rgba(0, 0, 0, 0.3)');
        lineGradient.addColorStop(1, 'rgba(0, 0, 0, 0.8)');
        ctx.fillStyle = lineGradient;
        ctx.fillRect(0, 0, '宽', '高');