## 如何使用多个弧从图像裁剪圆？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

• 回答 (1)
• 关注 (0)
• 查看 (21)

``````const ctx = \$('#canvas')[0].getContext("2d");

const image = new Image();
const coords = [[115, 62.5], [495, 62.5]];
const coords2 = [[65, 12.5] , [445, 12.5]];

for(let i = 0; i < coords.length; i++) {
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 50, 0, Math.PI * 2, true);
ctx.clip();
ctx.drawImage(image, coords2[i][0], coords2[i][1], 100, 100);

}
};
image.src = 'https://placeholdit.imgix.net/~text?txtsize=50&w=700&h=250&bg=afeafe';``````

``````#canvas {
border:1px solid grey;
}``````

``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="800" height="200"></canvas>``````

``````ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 100 / 2, 0, Math.PI * 2, true);
ctx.clip();
``````

### 1 个回答

```const ctx = \$('#canvas')[0].getContext("2d");

const image = new Image();

const coords = [[115, 62.5], [495, 62.5]];
const coords2 = [[65, 12.5] , [445, 12.5]]
for(let i = 0; i < coords.length; i++) {
ctx.save();
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], 100 / 2, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(image, coords2[i][0], coords2[i][1], 200 / 2, 200 / 2);
ctx.restore();
}
};

image.src = 'https://placeholdit.imgix.net/~text?txtsize=50&w=700&h=250&bg=afeafe';```
```#canvas {
border:1px solid grey;
}```
```<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="800" height="200"></canvas>```