如何在HTML5畫布中使用alpha = 0繪製「擦除」

如何使用alpha = 0繪製HTML5畫布？想象一下，我正在製作一個photoshop克隆，我有一層純紅色的圖層。我選擇橡皮擦工具並繪製。它吸取了rgba(0,0,0,0)讓我看透了背景。我如何在HTML5 Canvas中做到這一點？如何在HTML5畫布中使用alpha = 0繪製「擦除」

這是一些代碼。

var rand = function(v) { 
 
    return Math.random() * v; 
 
}; 
 

 
var canvas = document.getElementsByTagName("canvas")[0]; 
 
var ctx = canvas.getContext("2d"); 
 

 
// fill the canvas with black 
 
ctx.fillStyle = "red"; 
 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 

 
// Erase some circles (draw them in 0,0,0,0); 
 
ctx.fillStyle = "rgba(0,0,0,0)"; 
 
ctx.globalCompositeOperation = "copy"; 
 
for (var ii = 0; ii < 5; ++ii) { 
 
    ctx.beginPath(); 
 
    ctx.arc(rand(canvas.width), rand(canvas.height), 
 
      rand(50) + 20, 0, 360, false); 
 
    ctx.fill(); 
 
} 
 

 
/* 
 
source-over  
 
source-in  
 
source-out  
 
source-atop 
 

 
destination-over  
 
destination-in  
 
destination-out  
 
destination-atop 
 

 
lighter  
 
darker  
 
copy  
 
xor 
 
*/

canvas { 
 
    margin: 10px; 
 
    border: 1px solid black; 
 
    background-color: yellow; 
 
}

<div>Want red with yellow circles</div> 
 
<canvas></canvas>

這是行不通的。所有畫布操作都被認爲是無限大，這意味着將設置爲「複製」的每個圓（圓弧）globalCompositeOperation有效地擦除每個圓圈之外的所有內容。

我可能可以設置剪裁以匹配圓，但理想情況下，我希望能夠用消除鋸齒的圓圈擦除，與Photoshop筆刷相同。

來源

2012-12-28 gman

你需要使用：

ctx.fillStyle = "rgba(0,0,0,1)"; // (Drawing with 0 alpha pretty much means doing nothing) 
ctx.globalCompositeOperation = "destination-out";

Working Example

記住保存以前globalCompositeOperation並恢復它，或者透明度不正常，後來工作。

的問題是，「與alpha=0在畫布上繪製只是覆蓋的一層看不見的‘墨水’，在默認情況下。

來源

2012-12-28 08:08:47 Cerbrus

你能解釋這是如何工作的？繪製「擦除」圓之前，我的小提琴中的畫布是255,0,0,255。 rgba（0,0,0,1）= 0,0,0,255。 alpha如何變爲0？只有來自源的255個選擇或來自目的地的255個選擇。 – gman

你是什麼意思_「alpha如何變成'0'？_？你的意思是在畫布的位置X處的alpha變爲'0'？在這種情況下，這就是[globalCompositeOperation'工作原理]（https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html）。使用''destination-out''，它會將已繪製的形狀從現有畫布中「剪切」出來。 – Cerbrus

[這是更好的鏈接。]（https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Compositing?redirectlocale=en-US&redirectslug=Canvas_tutorial%2FCompositing） – Cerbrus

如果您有流暢抹去，所以被點擊和移動這條線的鼠標時，應被刪除，這可能是一個解決辦法：

var canvas = document.getElementById("myCanvas"); 
var eraseWidth = 5; 

$("#myCanvas").mousedown(function(canvas){   //the mousedown (writing) handler, this handler does not draw, it detects if the mouse is down (see mousemove) 
    x = canvas.pageX-this.offsetLeft; 
    y = canvas.pageY-this.offsetTop; 
}); 

$("#myCanvas").mousemove(function(canvas){ 
    context.beginPath(); 
    var x2 = x-(eraseWidth/2);   //x2 is used to center the erased rectangle at the mouse point 
    var y2 = y-(eraseWidth/2);   //y2 is used to center the erased rectangle at the mouse point 
    context.clearRect(x2, y2, eraseWidth, eraseWidth);    //clear the rectangle at the mouse point (x2 and y2) 
    context.closePath(); 
};

基本上這樣做是明確的，當鼠標移動的矩形，每次的mousehandler發送鼠標移動事件，並使用X和畫布的中心y座標清除復位，結果是清除（擦除）線。

OK，你可以看到長方形如果移動太快，但我的項目是一個概念，所以它的伎倆我;）

來源

2012-12-28 11:57:12

如果你在一個類似於工作，Photoshop的克隆，然後對每個圖層創建一個畫布可能是最好的選擇。我認爲這將大大簡化你的一切，同時讓你獲得更好的回報。

來源

2012-12-30 19:16:08 joeycato

如何在HTML5畫布中使用alpha = 0繪製「擦除」

回答

相關問題