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()的文檔以查看其附帶的選項。