clip
2023年08月12日
一、认识
ctx.clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。
二、语法
ctx.clip();
ctx.clip(fillRule);
ctx.clip(path, fillRule);
-
fillRule: 这个算法判断一个点是在路径内还是在路径外。 允许的值:-
nonzero: 非零环绕原则 -
evenodd: 奇偶环绕原则
-
-
path: 需要剪切的Path2D路径。
三、场景
3.1 矩形裁剪圆形
<canvas id="canvas"></canvas>
<script>
const canvas = document.querySelector('#canvas');
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 300, 200);
</script>