Canvas ändern lineWidth in Zeichnung nachdem es gezeichnet wurde

Question

In Leinwand, ist es möglich, die lineWidth einer Zeichnung zu ändern?

Beispiel:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.moveTo(0,0); 
 
ctx.lineWidth = 15; 
 
ctx.lineTo(100, 100); 
 
ctx.stroke();

<canvas id="canvas"></canvas>

Es wurde bereits gezogen, aber ich möchte die Linienbreite ändern, nachdem es gezogen wird.

Answer 1

Wenn Sie nach dem Neuzeichnen der Linie mit einer neuen Linienbreite fragen, ist das durchaus möglich. Sie können requestAnimationFrame verwenden. Hier ist ein kleines Ziel, Ihnen zu zeigen, was ich meine.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
requestAnimationFrame(draw); 
 

 
function draw(timestamp) { 
 
    var period = 0.5; 
 
    var t = Date.now()%(period*1000)/(period*1000); 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,0); 
 
    ctx.lineWidth = 15+5*Math.sin(t*2*Math.PI); 
 
    ctx.lineTo(100, 100); 
 
    ctx.stroke(); 
 
    requestAnimationFrame(draw); 
 
}

<canvas id="canvas"></canvas>

Answer 2

Ich fürchte, Sie es mit einer anderen Linienbreite neu ziehen werden müssen.

Der Grund ist, dass path nicht als Variable gespeichert werden kann, so dass Sie ctx.stroke() nicht mehrmals auf demselben Pfad aufrufen können. Animationsrahmen sind wahrscheinlich die beste Wahl.