Canvas clip限定绘制区域

Canvas clip() 方法用于限制绘制区域，只有在指定的路径内的部分才会被绘制出来。

语法：

context.clip();

示例：

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 绘制一个矩形
    context.fillRect(50, 50, 100, 100);

    // 限定绘制区域为一个圆形
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.clip();

    // 在限定的区域内绘制一个矩形
    context.fillRect(0, 0, 200, 200);
</script>

运行以上代码，会在画布上绘制一个矩形，并在矩形内剪切出一个圆形区域，最终只有圆形区域内的部分被绘制出来