JavaScript 画布剪辑矩形

在 JavaScript 中，我们可以使用 canvas 元素来创建图像，画布剪辑矩形可以将图像裁剪为指定的形状。通过使用画布剪辑矩形，我们可以将给定的图像裁剪为矩形，从而创建出仅包含所需部分的图像。

准备工作

在使用画布剪辑矩形之前，我们需要先在 HTML 页面中创建一个 canvas 元素，并获取其上下文对象：

<canvas id="myCanvas"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</script>

语法

画布剪辑矩形使用 clip() 方法，该方法接受四个参数，分别表示矩形左上角的坐标和宽度、高度。语法如下：

ctx.clip(x, y, width, height);

示例

下面的例子演示了如何在画布上绘制一个圆形图像，并将其剪辑为正方形。我们使用一个图像作为背景，并在上面绘制一个圆形。然后，我们使用 clip() 方法将图像剪辑为正方形。

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

// 背景图
const background = new Image();
background.src = 'https://via.placeholder.com/500x500';

background.onload = function() {
  // 绘制背景图
  ctx.drawImage(background, 0, 0);

  // 剪辑为正方形
  ctx.beginPath();
  ctx.moveTo(70, 70);
  ctx.lineTo(170, 70);
  ctx.lineTo(170, 170);
  ctx.lineTo(70, 170);
  ctx.closePath();
  ctx.clip();

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(120, 120, 50, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
};

注意事项

• 在调用 clip() 方法之后，所有后续的绘制操作都会被限制在剪辑形状之内。
• 剪辑形状可以是任意形状，不仅限于矩形。
• 使用 clip() 方法剪辑过后，不能再次修改剪辑形状。如果需要更改形状，需要重新绘制剪辑路径并再次调用 clip() 方法。
• 在剪辑路径之外绘制的任何内容都不会在剪辑形状内可见。
• 要取消剪辑路径，可以使用 ctx.restore() 方法。