html - html Canvas 的圆形裁剪

Question

我有一个正方形的上下文，我正试图将 Canvas “切割”成一个圆圈。我试过使用 clip() 但这只在将东西绘制到 Canvas 上之前有效。画完所有内容后，有什么方法可以裁剪 Canvas 吗？

Answer 1

您可以使用 context.globalCompositeOperation='destination-in' 进行“事后”剪辑。

示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="/image/oURrw.png";
function start(){
  var cw,ch;
  cw=canvas.width=img.width;
  ch=canvas.height=img.height;
  ctx.drawImage(img,0,0);
  ctx.globalCompositeOperation='destination-in';
  ctx.beginPath();
  ctx.arc(cw/2,ch/2,ch/2,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

Original Image:<br>
<img src='/image/oURrw.png'><br>
Clip existing content into circle with Compositing<br>
<canvas id="canvas" width=300 height=300></canvas>