2016-08-01 9 views
0

In Leinwand, ist es möglich, die lineWidth einer Zeichnung zu ändern?Canvas ändern lineWidth in Zeichnung nachdem es gezeichnet wurde

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.

+0

Was hält Sie davon ab, es nach dem Zeichnen zu ändern? – kamoroso94

Antwort

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>

0

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.

+0

Jetzt können Sie ** einen Pfad zu einer Variablen mit dem kürzlich angenommenen ['Path2D'] speichern (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) . ;-) – markE

+1

Verdammt, ich muss aufholen :) Danke! – AgataB

Verwandte Themen