HTML5 canvas替代putImageData

Question

除了分别使用getImageData和putImageData之外，还有另一种方法可以将像素区域从（例如）画布A复制到画布B中。

同样，当复制到画布B时，它应像油漆刷一样变圆而不是矩形。

Answer 1

要将内容从一个画布复制到另一个画布，可以使用drawImage() 。 此方法可以将图像，画布或视频作为图像源。

进行四舍五入有两种方法：

方法A-使用复合模式

此方法假定目标画布为空。 首先在目标画布上建立一个圆圈（ ctx是画布B / target / destination的上下文）：

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通道设置为完整）。 然后更改复合模式并在画布A中绘制：

ctx.globalCompositeOperation = 'source-in';   // change comp. mode
ctx.drawImage(canvasA, 0, 0);                 // draw canvas A
ctx.globalCompositeOperation = 'source-over'; // reset to default

小提琴

方法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

小提琴

如果要在绘制到画布B时更改画布A的大小和位置，请查看drawImage()的文档以查看其附带的选项。