css - 使用 css 设置 html5 画布字体颜色

Question

如果我想要不同颜色主题的样式表，如何将画布字体和线条颜色保留在外部 CSS 文件中？

我可以制作隐藏的 dom 元素并将它们用作变量。

我可以只使用 javascript 来读取当前主题并使用 javascript 变量设置颜色，但这样就违背了 css 文件的目的。我还希望其他人无需编写 javascript 即可编辑样式和颜色。

有没有办法将设置存储在 css 文件中并使用 javascript（没有 ajax 或 jquery）轻松读取它？

Answer 1

画布元素中的线条颜色等不受 CSS 影响，因此没有办法直接这样做。您可以做的最好的事情是使用某种数据文件，该文件以 JSON 格式存储对象，其中包含每个主题的适当画布变量值。

Answer 2

画布绘图独立于 CSS。您使用 Canvas API 方法设置字体和颜色，而不是通过 CSS 样式设置。我能想到的最好的与外部 CSS 文件对应的是外部 JavaScript 文件，您只需将值分配给代码中用于在画布上绘图的变量。该文件可以非常简单，只需赋值，因此不需要对 JavaScript 有任何实质性的了解即可对其进行编辑。