Nếu bạn đang vẽ phức tạp, lớp, bạn có thể sử dụng globalCompositeOperation để mô phỏng cắt trong một khung hình thứ hai, đầu. Sau đó, bạn có thể sử dụng drawImage để sao chép canvas đầu vào lại khung ban đầu. Tôi không thể đảm bảo hiệu suất của phương pháp này, nhưng đó là cách duy nhất tôi biết để có được những gì bạn muốn.
//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, ...);
Lý do chúng tôi thực hiện điều này trong canvas đầu là đích đến là một hoạt động khá phá hoại. Nếu bạn đã vẽ một số thứ vào trong khung chính (có lẽ bạn đã đặt một gradient đẹp ở phía sau), và sau đó muốn vẽ một hình ảnh bị cắt bớt, vòng tròn cắt cũng sẽ cắt ra mọi thứ bạn đã vẽ. Tất nhiên, nếu tình hình cụ thể của bạn là đơn giản hơn (có thể TẤT CẢ bạn muốn vẽ là một hình ảnh cắt bớt), sau đó bạn có thể bỏ qua vải đầu.
Bạn có thể phát xung quanh bằng các chế độ cắt khác nhau trên my demo page. Hàng dưới cùng (với các gradient) không phải là quá hữu ích cho bạn, nhưng hàng trên cùng (với hình tròn và hình vuông) có liên quan hơn nhiều.
chỉnh sửa
Rất tiếc, tôi vô tình forked your JSFiddle để chứng minh kỹ thuật này.
Tôi cũng gặp sự cố này. Những gì tôi đã làm là vẽ một vòng tròn ở cùng một vị trí với hình ảnh, đằng sau nó, với bán kính lớn hơn 1 hoặc 2 px. Giữ màu sắc tương tự và có bạn đi, "chống răng cưa" hình ảnh clip. – Automatico