畫布在繪製後更改線寬

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()。動畫幀可能是你最好的選擇。