HTML5 canvas替代putImageData

Question

是否有另一种方法将像素区域从（比方说）Canvas A复制到画布B，而不是分别使用getImageData和putImageData。

另外，当复制到Canvas B时，它应该像画笔一样圆角而不是矩形。

Answer 1

要将内容从一个画布复制到另一个画布，您可以使用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()以查看其附带的选项。