キャンバスが描画された後の描画の線幅

Question

キャンバスで、図面の線幅を変更できますか？

例：

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>

それはすでに描かれているが、私はそれが描画された後、線幅を変更したいです。

Answer 1

新しい線幅で線を再描画することをお望みなら、それは可能です。​​を使用できます。私が意味するものをあなたに示す少しの目標があります。

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

私はあなたが別の線幅でそれを再描画する必要があります怖いです。

pathは変数として格納できないため、同じパスに複数回同じctx.stroke()を呼び出すことはできません。アニメーションフレームはおそらくあなたの最善の策です。