HTML5 canvas 之 clip

最新推荐文章于 2025-03-11 14:10:03 发布

水丸

最新推荐文章于 2025-03-11 14:10:03 发布

阅读量3.2k

点赞数 1

分类专栏： HTML5 文章标签： html canvas clip save restore

本文链接：https://blog.csdn.net/int__double/article/details/81395755

版权

HTML5 专栏收录该内容

2 篇文章

订阅专栏

今天学习HTML5 canvas clip() 方法时，发现其几乎都要与save()与restore()方法嵌套使用，不这样效果又达不到期望，故自己做了一下一些尝试，以加深理解。

1. 主要代码及效果图如下

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="mc" width="800" height="800"
        style="border:1px solid black"></canvas>
<script type="text/javascript">

    var canvas = document.getElementById('mc');
    var ctx = canvas.getContext('2d');

    var image1 = new Image();
    image1.src = "star.jpg";
    var image2 = new Image();
    image2.src = "littleCh.jpg";

    image1.onload = function () {

       // ctx.save();

        ctx.beginPath();
        ctx.arc(400, 250, 130, 0, Math.PI, false);
        ctx.lineTo(400, 250);
        ctx.closePath();
        ctx.strokeStyle = "#f00";
        ctx.lineWidth = 10;

        //ctx.clip();

        ctx.drawImage(image1, 100, 100);
        ctx.stroke();

      //  ctx.restore();

       // ctx.save();

        ctx.beginPath();
        ctx.arc(400, 450, 200, 0, Math.PI, false);
        ctx.lineTo(400, 450);
        ctx.closePath();

      //  ctx.clip();

        ctx.drawImage(image2, 100, 400);

        ctx.stroke();

      // ctx.restore();
    }

</script>
</body>
</html>

红色弧为clip即将划分的区域