javascript - 改变 Canvas 元素的颜色

Question

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

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

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

Answer 1

非常接近。从某种意义上说，您不能真正“更改” Canvas 上元素的颜色，因为 it has no scene graph ，或者换句话说，它没有在 Canvas 上绘制的内容的历史记录。要更改线条的颜色，您必须重新绘制线条。

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

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