美文网首页
canvas 实现中间镂空效果(中间透明圆环)

canvas 实现中间镂空效果(中间透明圆环)

作者: webmrxu | 来源:发表于2021-08-14 12:35 被阅读0次
    image.png

    示例如上图,有两个圆,形成的圆环中间透明。

    参考:剪纸效果、镂空效果

    代码

        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = bg;
        ctx.arc(300, 510, 90, 0, Math.PI * 2, false);
        ctx.arc(300, 496, 64, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.restore();
    

    相关文章

      网友评论

          本文标题:canvas 实现中间镂空效果(中间透明圆环)

          本文链接:https://www.haomeiwen.com/subject/keasbltx.html