javascript - HTML5 Canvas 替代 putImageData

Question

除了分别使用 getImageData 和 putImageData 之外，是否还有另一种方法可以将像素区域从(比如说) Canvas A 复制到 Canvas B。

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

Answer 1

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

绘制圆 Angular 有两种方法:

方法 A - 使用复合模式

此方法假设目标 Canvas 为空。首先在目标 Canvas 上设置一个圆圈(ctx 是 Canvas 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 channel 设置为完整)。然后更改composite mode并在 Canvas 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 类似，但目标 Canvas 可能包含数据。此方法的缺点是某些浏览器会留下粗糙(锯齿)的边缘。基础是相似的 - 首先定义一个完整的弧作为路径但不填充它:

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

如果您想在绘制到 Canvas B 时更改 Canvas A 的大小和位置，请查看 documentation for drawImage()查看它附带的选项。