更改画布元素的颜色

Question

我正在尝试动态更改画布上绘制的线条的颜色...

ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey"

它可能是鼠标悬停事件或按下按钮或鼠标单击事件，我想更改线条的颜色或使其加粗。是否可以通过添加事件来更改颜色，或者是否可以为特定元素的事件提供样式？

Answer 1

很接近。从某种意义上说，您无法真正“更改”画布上元素的颜色，因为它没有场景图，或者换句话说，它没有画布上所绘制内容的历史记录。要更改线条的颜色，您必须重新绘制线条。

ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey";
ctx.stroke();

// To make the line bold and red
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Red";
ctx.lineWidth = 5;
ctx.stroke();

如果画布上有更复杂的场景，您将不得不重新绘制整个场景。有许多 Javascript 库可以扩展 canvas 标签的基本功能，并提供其他绘图功能。您可能想看看Processing，它看起来非常令人印象深刻。