Question

在画布中，是否可以更改图纸的lineWidth？

示例：

＆＃13;

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();

＆＃13;

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

＆＃13;

它已被绘制，但我想在绘制后更改lineWidth。

Answer 1

如果您要求使用新的线宽重新绘制线条，那很有可能。您可以使用requestAnimationFrame。这有点动画，向你展示我的意思。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

我担心你需要用不同的线宽重新绘制它。

原因是path无法存储为变量，因此您无法多次在同一路径上调用ctx.stroke()。动画帧可能是你最好的选择。

画布在绘制后更改绘图上的lineWidth

2 个答案: