Question

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

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

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

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

有更好的方法吗？

Answer 1

警告

这个答案应该被删除但是因为它被接受了我无法做到。以下是答案，但是存在许多问题和浏览器兼容性问题，使得这个答案不切实际。

画布的SVG标记

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

使用CSS的SVG标记

 <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来纠正错误。

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

1 个答案: