HTML Canvas透明筆劃線

我想清除特定畫布區域中的筆觸矩形。我最初的想法是，我只需要用相同的參數再次調用context.strokeRect函數，並且之前將strokeStyle更改爲transparent。但它不起作用。爲什麼以及如何修復它？請注意，我只想清除矩形的筆畫（邊框），而不是內部的所有內容。HTML Canvas透明筆劃線

編輯：我只想清除邊框，而不是裏面的所有東西，所以我不能用clearRect()的方法。此外，我無法清除整個畫布並重新繪製它，因爲畫布包含動畫。

JS撥弄：下面https://jsfiddle.net/47okok8s/

來源

2017-05-19 Furman

注：RGBA - >（紅，藍，綠，阿爾法），α值（範圍從[0,1]）控制不透明度，1，爲完全不透明[W3 CSS3顏色]（https://www.w3schools.com/css/css3_colors.asp） –

使用clearRect清除現有的矩形 – karthick

我不認爲[this]（https://jsfiddle.net/2gLj52u4/）會工作。：P儘管如此，我認爲這是不可能的。你可能會有更好的運氣記錄「繪畫」過程並重播它，但不包括紅色輪廓步驟。帆布很像繪畫。你不能撤消那個中風。 –

實施例具有兩個帆布。 background只是有一些文字。然後我用「紅色」填充畫布，並使用globalCompositeOperation"destination-out"刪除像素。我還將alpha設置爲0.5，一半刪除一些像素。

const ctxB = background.getContext("2d"); 
 
const ctxF = foreground.getContext("2d"); 
 
ctxB.textAlign = "center"; 
 
ctxB.textBaseline = "middle"; 
 
ctxB.font ="20px arial"; 
 
ctxB.fillText("Some Background text",150,25); 
 
ctxB.fillText("Some Background text",150,75); 
 
ctxB.fillText("Some Background text",150,125); 
 

 
ctxF.lineJoin = "round"; 
 
ctxF.fillStyle = "red"; 
 
ctxF.fillRect(0,0,300,150); 
 
ctxF.lineWidth = 8; 
 
ctxF.globalCompositeOperation = "destination-out"; 
 
ctxF.strokeRect(25,25,250,100); 
 
ctxF.fillRect(75,50,150,50); 
 
ctxF.globalAlpha = 0.5; 
 
ctxF.fillRect(65,40,170,70); 
 
ctxF.globalCompositeOperation = "source-over";

canvas { 
 
    position : absolute; 
 
    top : 0px; 
 
    left: 0px; 
 
}

<canvas id = "background"></canvas> 
 
<canvas id = "foreground"></canvas>

來源

2017-05-19 20:08:27 Blindman67

HTML Canvas透明筆劃線

回答

相關問題