HTML Canvas transparente Strichlinie

Question

Ich möchte ein gestrichenes Rechteck in bestimmten Leinwandbereich löschen. Mein erster Gedanke war, dass ich nur context.strokeRect Funktion wieder mit denselben Parametern aufrufen muss, mit strokeStyle vorher zu transparent zu ändern. Es funktioniert jedoch nicht. Warum und wie kann ich es reparieren? Beachten Sie, dass ich nur den Strich (Rahmen) des Rechtecks ​​löschen möchte, nicht alles im Inneren.

Edit: Ich möchte nur Rand löschen, nicht alles im Inneren, so kann ich nicht clearRect() Methode verwenden. Außerdem kann ich die gesamte Leinwand nicht löschen und neu streichen, da die Leinwand Animationen enthält.

JS Geige: https://jsfiddle.net/47okok8s/

Answer 1

Beispiel unten hat zwei Leinwand. Die background hat nur etwas Text. Dann fülle ich die foreground Leinwand mit "rot" und verwende globalCompositeOperation"destination-out", um Pixel zu entfernen. Ich setze Alpha auch auf 0,5 und halb entferne einige Pixel.

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>