个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
如何使用 css variables设置 Canvas 颜色？
例子:
<html>
<head>
<style>
:root {
--color-bright:#ffca00;
--color-bg:#40332e;
}
body {
background-color: var(--color-bg);
color: var(--color-bright);
}
</style>
</head>
<body>
<center>
<div>
<canvas id="loadingCanvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
</div>
</center>
This text is actually yellowish.
<script type='text/javascript'>
var loadingContext = document.getElementById('loadingCanvas').getContext('2d');
var canvas = loadingContext.canvas;
loadingContext.fillStyle = "rgb( 0, 0, 0 )";
// Doesn't work (should be brown instead of black):
loadingContext.fillStyle = "var(--color-bg)";
loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);
loadingContext.font = '30px sans-serif';
loadingContext.textAlign = 'center'
loadingContext.fillStyle = "rgb( 200, 200, 200 )";
// Doesn't work (should be yellow instead of white):
loadingContext.fillStyle = "var(--color-bright)";
loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2);
</script>
</body>
</html>
最佳答案
不，你不能，至少目前不能。我必须承认我不是 100% 确定它是否应该工作，导航 CSS parse a grammar现在对我来说相当复杂，但无论如何，没有浏览器支持它，所以即使规范实际上告诉它应该工作，规范也是错误的(我会进一步调查这个问题，也许在那里打开一个问题)。
请注意，很明显 currentColor should work ，在 Firefox 中确实如此，但在 Blink 和 WebKit 中都没有，所以最好认为它不受支持。
然而，您可以通过调用 getComputedStyle(context.canvas).getPropertyValue("--the-property") 自己获取解析值:
const loadingContext = document.getElementById('loadingCanvas').getContext('2d');
const canvas = loadingContext.canvas;
loadingContext.fillStyle = "rgb( 0, 0, 0 )";
loadingContext.fillStyle = getComputedStyle(canvas).getPropertyValue("--color-bg");
loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);
loadingContext.font = '30px sans-serif';
loadingContext.textAlign = 'center'
loadingContext.fillStyle = "rgb( 200, 200, 200 )";
loadingContext.fillStyle = getComputedStyle(canvas).getPropertyValue("--color-bright");
loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2);:root {
--color-bright:#ffca00;
--color-bg:#40332e;
}
body {
background-color: var(--color-bg);
color: var(--color-bright);
}<canvas id="loadingCanvas" width="800" height="600"></canvas>
This text is actually yellowish.请注意，即使它确实按照您想要的方式工作，该值也只会在属性设置时被解析，所以这样做的效果完全相同，而且，这显然不适用于不是在 DOM 中连接。
Ps: Chrome 和 Safari 实际上支持将 fillStyle 设置为 "currentColor"，但仅当颜色设置为直接颜色时(没有 currentColor ，也不是 var(--prop))，当设置为 canvas 元素的 style 属性时(不是通过样式表也不是继承)。这在 IMO 中非常糟糕，我将打开几个问题以至少让它正常工作。
关于javascript - 我可以使用 css 中的变量设置 Canvas fillStyle 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71368314/
26
4
0
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我有一个可视化工具设置，它每 7.5 秒改变一次颜色，问题是，它立即改变颜色，你可以在 fillStyle 上使用 .animate() 吗？如果没有，有没有办法为 fillStyle 添加过渡？ 最
我收到一个不寻常的错误: ctx_wrap.fillStyle is not a function 在这一行: ctx_wrap.fillStyle('#b8b8b8'); 在这里: ... this
只是练习使用带有参数的构造函数，并且遇到了一个错误，我认为该错误源于 fillStyle 方法。 我的 Canvas 只是显示为空白，并且控制台上没有错误？ 尝试构建 5 个不同的圆圈，每个圆圈都有自
我正在检查我的游戏在拖尾效果下的性能会降低多少。但我注意到每秒的操作次数更多了。这怎么可能？ 这是怎么回事... context.fillRect(0, 0, 500, 500); // cl
所以我按照 this tutorial 制作了一个打砖 block 游戏这相当简单，但可选练习之一是让球在碰到 Canvas 一侧时改变颜色。该网站没有告诉您如何执行此操作，并且经过几个小时的谷歌搜索
这个问题在这里已经有了答案: fillStyle not a function (1 个回答) 关闭 5 年前。 我正在尝试显示图像，但我在使用 context.fillStyle 时遇到问题。它应
我正在尝试让我的 Canvas 使用来自 ARGB 整数数组的填充样式。 这是一个可以提升到 JSFiddle 中的最小工作示例: var ctx = $('#cv')[0].getContext("
也许我没有正确使用 Math.random()，尽管我不知道我做错了什么: ctx.fillStyle = "rgb(Math.floor(Math.random()*256),Math.floor(
在 JavaScript 中，是否可以在 lines() 中使用任何类型的 fillStyle ？ 这是我的代码: var text = document.getElementById("text")
这是我的代码: Rogue Game Sorry your browser does not support canvas! 和 Java
假设有人尝试按如下方式分配 var c = document.getElementById("canvasID"); var g = c.getContext("2d"); g.fillStyle =
有谁知道如何在 fillStyle 上设置渐变颜色，文档中提到这是可能的，但它没有任何示例，我不知道如何调用属性或方法来使用它。 http://dougtesting.net/winwheel/ref
我有一个有循环的函数。在循环中，它创建一个 Canvas 并设置不透明度。然后它设置背景颜色并将 Canvas 转换为图像。 不知何故， Canvas 上设置了不透明度，但背景颜色未设置。 if (r
我想这个问题的解决方案非常简单，如果这是非常明显的，请提前道歉，但我似乎无法弄清楚如何为两个不同的弧设置两个不同的 fillStyles ...我只是想能够绘制不同颜色的圆圈。下面我介绍了我通常如何在
我正在涉足 html5 和 javascript(我对两者一无所知)。找了一些html5的例子，复制过来，开始试验。这是一些代码。这个想法是，当按下任何键时，两个方 block 开始向左移动(还没有清
我最初写出了每一列和每一行，然后我试图进一步重构它。 var r0 = (r == 0); var r1 = (r == 1); var r2 = (r == 2); var r3 = (r == 3
JSFiddle Link (But, please read first) 假设，我有一个 400 x 200 的 Canvas 我在 Canvas 上添加了一个 40 x 40 的球:(参见下面
我正在使用 2D breakout tutorial from MDN 学习 Canvas 还有一个练习:每次球撞到墙上时，尝试将球的颜色更改为随机颜色。 在抽球之前，我检查球是否在墙内。如果它接触到
这段小代码间隔清除旧 Canvas 数据: // start interval ctx.save(); ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; ct
我是一名优秀的程序员,十分优秀！