镂空圈---------------

最新推荐文章于 2025-08-13 21:05:35 发布

原创最新推荐文章于 2025-08-13 21:05:35 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

这篇博客通过canvas的save()、restore()、globalCompositeOperation等方法，详细展示了如何创建一个带有透明圆环效果的矩形，并探讨了fillStyle、globalAlpha、strokeStyle等属性的应用，是前端图形绘制的一个实例教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 ctx.save()
                ctx.fillStyle = "#fff";
                ctx.globalAlpha = 1;
                ctx.fillRect(0, 0, res.screenWidth, res.screenWidth * 0.8)
                ctx.restore()
 
                ctx.save()
                ctx.globalCompositeOperation = 'destination-out'
                ctx.beginPath();
                ctx.arc(res.screenWidth / 2, res.screenWidth / 10 * 4, res.screenWidth / 3, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();
 
                ctx.save()
                ctx.beginPath();
                ctx.fillStyle = "#fff";
                ctx.lineWidth = 1
                ctx.arc(res.screenWidth / 2, res.screenWidth / 10 * 4, res.screenWidth / 3, 0, 2 * Math.PI);
                ctx.stroke();
                ctx.restore()
                ctx.draw()