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

2019年7月27日 213次阅读

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

    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图像渲染到画布,则可以将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进行了更改,则需要重新渲染它以查看更改.

UPDATE

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

我在CSS中犯了一个错误,忘记了SVG有自己的风格.我通过用填充替换颜色来纠正它.

点赞