HTML canvas clip() 方法

实例

从上下文裁剪一个 200*120 像素的区域。然后，绘制一个红色矩形。只有红色矩形内部裁剪区域内的部分才能看到

不使用 clip()

使用 clip()

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");


// 裁剪一个矩形区域
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();


// 在 clip() 之后绘制红色矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script>