canvas_10_裁剪路径

最新推荐文章于 2024-07-25 09:24:40 发布

熙哥_tito

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量63

点赞数

分类专栏： canvas 文章标签：前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004824

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

话不多说，上代码！！！

<body>
  <canvas id="can1" width="500" height="500"></canvas>
  <canvas id="can2" width="500" height="500"></canvas>
  <script>
    (() => {
      let canvas = document.getElementById("can1")
      let ctx = canvas.getContext("2d")

      ctx.beginPath()
      ctx.arc(20,20, 100, 0, Math.PI * 2,false);
      ctx.clip();
      ctx.fillStyle = "pink";
      ctx.fillRect(20, 20, 100,100);
    })();

    (() => {
      let canvas = document.getElementById("can2")
      let ctx = canvas.getContext("2d")
      ctx.beginPath()
      ctx.moveTo(165,180)
      ctx.lineTo(200,100)
      ctx.lineTo(240,180)
      ctx.lineTo(310,190)
      ctx.lineTo(260,250)
      ctx.lineTo(270,320)
      ctx.lineTo(205,285)
      ctx.lineTo(145,320)
      ctx.lineTo(150,250)
      ctx.lineTo(100,200)
      ctx.clip();
      ctx.fillStyle = "pink";
      ctx.fillRect(20,20,350,350)
    })()

    // var ctx;
    // function draw() {
    //   var canvas = document.getElementById('can1');
    //   if (!canvas.getContext) return;
    //   var ctx = canvas.getContext("2d");

    //   ctx.beginPath();
    //   ctx.arc(20, 20, 100, 0, Math.PI * 2);
    //   ctx.clip();

    //   ctx.fillStyle = "pink";
    //   ctx.fillRect(20, 20, 100, 100);
    // }
    // draw();
  </script>
</body>