Javascript 使用CSS为绘制到画布的元素设置样式

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

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

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

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

---

有更好的方法吗？

警告

这个答案应该删除，但由于它已被接受，我不能。下面是答案，但存在许多问题和浏览器兼容性问题，这使得这个答案不切实际

画布的SVG标记

如果使用SVG图像渲染到画布，则可以向SVG中的元素添加CSS样式规则，只要继续渲染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>

如果您对CSS或SVG进行了更改，则需要重新渲染以查看更改

更新

有关CSS中链接的更多信息，请参见MDN

---

我在CSS中犯了一个错误，忘记了SVG有自己的风格。我用

fill

替换了

color

，纠正了这个问题。我做了一些黑客操作，比如在CSS样式表中为站点颜色方案创建特殊类，然后用每个类创建页面元素，这样我就可以（从JavaScript）从DOM元素中获取颜色。我真的希望有一种不那么可怕的方法来实现这一点。当你可以使用预期的（也是最好的）工具：JavaScript时，为什么还要添加昂贵的间接层（CSS到JS到画布）？显然是因为想要将所有样式信息保存在一个地方（以及设计师可以访问的地方）。哇，好主意。不过，我不太清楚您所说的

svg.src=

行是什么意思。大概我会使用

document.createElements

然后

appendChild

来实际添加我的元素？@markE-me和SVG几乎不说话，但有时它会填补一个空白。@SteveBennett是的，您是正确的，附加到DOM是更安全的选择。我不得不在这里不同意您的观点，我想知道您或OP中是否有人测试过它：

中的svg没有加载任何外部资源。这就是本文的全部目的，我不会写其他内容：-）。当CSS加载到

中时，它必须位于元素本身内部才能获取资源（无论是外部CSS、元素还是图像）。因此，要么用包含样式标记的svg标记更改答案，要么只在svg元素上应用内联样式。是的，我还想知道将其硬编码到svg文件而不是js文件有什么好处。此方法的唯一真正好处是可以应用于svg文本节点上的所有文本装饰，并且这些装饰不是在画布中本机实现的（下划线等）。不幸的是，FF不支持这些节点上的字母间距属性。。。

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