HTML5 canvas 之 clip

今天学习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即将划分的区域

2.两clip()去注释尝试

所说的去注释，即为将 “//ctx.clip(); ” 改为 “ ctx.clip(); ”

由此可见，前面的clip的区域会作用于后面的图形显示，而后面clip的区域则不作用于前面的图形显示；这也解释了第三个图片，由于第一个clip导致了两个图片只显示蜡笔小新的一部分，而第二个clip导致樱桃小丸子只显示一部分，但由于第一个clip的作用，这部分将不显示。

3.嵌套save()与restore()

为了能达到预期目的，我们还是注意嵌套使用clip()方法，但我们去掉代码六处注释时，会是以下效果图。

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

2.两clip()去注释尝试

3.嵌套save()与restore()

猜你喜欢