如果您正在执行复杂的分层绘图,则可以使用 globalCompositeOperation 在第二个临时画布中模拟剪辑。然后,您可以使用 drawImage 将临时画布复制回原始画布。我不能保证这种方法的性能,但这是我知道得到你想要的东西的唯一方法。
//set-up - probably only needs to be done once
var scratchCanvas = document.createElement('canvas');
scratchCanvas.width = 100;
scratchCanvas.height = 100;
var scratchCtx = scratchCanvas.getContext('2d');
//drawing code
scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height);
scratchCtx.globalCompositeOperation = 'source-over'; //default
//Do whatever drawing you want. In your case, draw your image.
scratchCtx.drawImage(imageToCrop, ...);
//As long as we can represent our clipping region as a single path,
//we can perform our clipping by using a non-default composite operation.
//You can think of destination-in as "write alpha". It will not touch
//the color channel of the canvas, but will replace the alpha channel.
//(Actually, it will multiply the already drawn alpha with the alpha
//currently being drawn - meaning that things look good where two anti-
//aliased pixels overlap.)
//
//If you can't represent the clipping region as a single path, you can
//always draw your clip shape into yet another scratch canvas.
scratchCtx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity
scratchCtx.globalCompositeOperation = 'destination-in';
scratchCtx.beginPath();
scratchCtx.arc(50, 50, 50, 0, 2 * Math.PI, true);
scratchCtx.closePath();
scratchCtx.fill();
//Now that we have a nice, cropped image, we can draw it in our
//actual canvas. We can even draw it over top existing pixels, and
//everything will look great!
ctx.drawImage(scratchCanvas, ...);
我们在草稿画布中执行此操作的原因是destination-in 是一个非常具有破坏性的操作。如果你已经在主画布上画了一些东西(也许你在背景中放了一个漂亮的渐变),然后想画一个剪裁的图像,剪裁圆也会剪掉你已经画的所有东西。当然,如果您的特定情况更简单(也许您想要绘制的只是一张剪裁的图像),那么您可以放弃草稿画布。
您可以在我的演示页面上使用不同的剪辑模式。底行(带有渐变)对您来说不太有用,但顶行(带有圆形和正方形)更相关。
编辑
哎呀,我不小心分叉了你的 JSFiddle来演示这项技术。