除了分别使用getImageData和putImageData之外，还有另一种方法可以将像素区域从（例如）画布A复制到画布B。
同样，当复制到画布B时，它应像油漆刷一样圆滑，而不是矩形。
最佳答案
要将内容从一个画布复制到另一个画布，可以使用drawImage()。此方法可以将图像，画布或视频作为图像源。
进行四舍五入有两种方法：
方法A-使用复合模式
此方法假定目标画布为空。首先在目标画布上设置一个圆（ctx是画布B /目标/目标的上下文）：
ctx.beginPath(); // clear previous path (if any)
ctx.arc(centerX, centerY, radius, 0, 6.283); // 1) draw a full arc on target
ctx.fill(); // fill with default color
1）6.283 = 2 x PI
这将绘制一个圆圈并填充它（确保Alpha通道设置为完整）。然后更改composite mode并在画布A中绘制：
ctx.globalCompositeOperation = 'source-in'; // change comp. mode
ctx.drawImage(canvasA, 0, 0); // draw canvas A
ctx.globalCompositeOperation = 'source-over'; // reset to default
FIDDLE
方法B-使用剪辑
这类似于方法A，但目标画布可能包含数据。这种方法的缺点是某些浏览器会留下粗糙（锯齿）的边缘。基础是相似的-首先将完整的弧线定义为路径，但不填充它：
ctx.beginPath();
ctx.save(); // for removing clip later
ctx.arc(centerX, centerY, radius, 0, 6.283); // draw a full arc on target
ctx.clip(); // define clip
ctx.drawImage(canvasA, 0, 0); // draw canvas A
ctx.restore(); // remove clip
FIDDLE
如果要在绘制到画布B时更改画布A的大小和位置，请查看documentation for
drawImage()以查看其附带的选项。关于javascript - HTML5 canvas替代putImageData，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23559848/