使用 CSS 对绘制到画布的元素进行样式设置答案

【问题标题】：Using CSS to style elements drawn to a canvas使用 CSS 对绘制到画布的元素进行样式设置
【发布时间】：2015-12-19 10:12:24
【问题描述】：

目前，我们在画布上书写文本时使用硬编码样式：

    ctx.setTransform(1,0,0,1,0,0);
    ctx.fillStyle = "#2F353C";
    ctx.font = "15px 'Roboto', sans-serif";
    ctx.fillText(varName || '', 5, 12);

我非常希望将实际样式信息存储在 CSS 文件中，并以某种方式从那里访问它。（我并不期待奇迹，比如 CSS 会神奇地应用于画布中呈现的元素......）

我能想到的唯一方法是在画布后面创建一些文本元素，为它们分配类，然后以某种方式访问它们的计算属性，将它们传递给画布元素。

有没有更好的办法？

【问题讨论】：

我已经完成了一些技巧，比如在 CSS 样式表中为网站配色方案创建特殊类，然后为每个类创建页面元素，以便我可以（从 JavaScript）从DOM 元素。我真的希望有一种不那么可怕的方式来做到这一点。
既然可以使用预期的（也是最好的）工具：JavaScript，为什么还要添加昂贵的间接级别（CSS-to-JS-to-canvas）？
出于显而易见的原因，希望将所有样式信息保存在一个地方（以及设计师可以访问的地方）。

标签： javascript css html canvas

【解决方案1】：

警告

这个答案应该被删除，但由于它已被接受，我无法这样做。以下是原样的答案，但存在许多问题和浏览器兼容性问题，使此答案不切实际。

画布的 SVG 标记

如果您使用 SVG 图像渲染到画布上，您可以将 CSS 样式规则添加到 SVG 中的元素，只要您继续渲染 SVG，它将反映所有规则，包括动画和其他基于时间的 FX。

带有 CSS 的 SVG 标记

<!-- within the SVG element -->
<svg>
<style>
/* CSS */
#buttonWhite {  /* ID name */
   fill:white;
   font-size:12px;
}
#buttonBlue {
   fill:blue;
   font-size:16px;
}
</style>
<text id="buttonWhite" x="100" y="100">I am white</text>
<text id="buttonBlue" x="100" y="200">I am blue</text>
</svg>

脚本

// within the script
var svg = new Image();
svg.src = "SVG_URL.svg";

// once svg has loaded then display it on the canvas
ctx.drawImage(svg,0,0);

如果您对 CSS 或 SVG 进行更改，则需要重新渲染它才能看到更改。

更新

有关 CSS 链接的更多信息，请参阅 MDN SVG & CSS

我在 CSS 中犯了一个错误，忘记了 SVG 有自己的样式。我已通过将 color 替换为 fill 来纠正它。

【讨论】：

哇，好主意。不过，不太确定svg.src = 行是什么意思。大概我会使用document.createElementNS 然后appendChild 来实际添加我的元素？
@markE me 和 SVG 几乎没有说话，但有时它会填补空白。
@SteveBennett 是的，你说得对，附加到 DOM 是更安全的选择。
我在这里不同意你的观点，我想知道你们中的任何人或 OP 是否已经测试过它：<img> 中的 svg 不加载任何外部资源。这就是my script 的全部目的，否则我不会写它:-)。当加载到<img> 中时，CSS 必须在元素本身内部才能获取资源（无论是外部 CSS、元素还是图像）。因此，要么使用包含样式标签的 svg 标记更改您的答案，要么只对 svg 元素应用内联样式。
是的，我也想知道将其硬编码为 svg 文件而不是 js 文件有什么好处。这种方法的唯一真正好处是您可以在 svg 文本节点上应用的所有文本装饰，并且这些文本装饰本身并未在画布中实现（下划线等）。不幸的是，FF 不支持字母间距属性那些...