画布在绘制后更改线宽

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()。动画帧可能是你最好的选择。