如何根据类名更改预填充的数据颜色属性？

Question

我有这个代码：

<canvas data-color="40,97,245">

问题？颜色已经填充，我想确保当 canvas.

上有某个类名时数据颜色会发生变化

问题是我无法更改它的color。背景颜色有效，但文本和线条颜色不会改变。有办法吗？

所以，例如

<canvas class="changeToBlue" data-color="#BLUE COLOR HEX">

我该怎么做？

Answer 1

您可以尝试使用 jquery。

$(".changeToBlue").attr("data-color","#000000");

Answer 2

两件事：

设置属性，data 或其他方式，都不是绘图时设置颜色的正确方法。
CSS background-color 属性 “有效”的原因是 canvas 元素是透明的。绘图颜色，无论是线条、文本还是形状，都无法通过 CSS 设置样式。 color 属性仅影响 DOM 文本，而 canvas 绘制的文本则不会。

相反，您想使用二维绘图上下文。要设置颜色，请获取绘图上下文，然后设置 fillStyle 或 strokeStyle 属性。有关 strokes and colors.

的更多信息，请参阅 MDN 帮助页面

样式设置示例：

let ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.strokeStyle = 'blue';

完整代码段：

function setBlues() {
  let canvases = document.querySelectorAll('canvas.changeToBlue');
  
  for (let canvas of canvases) {
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.strokeStyle = 'blue';
  }
}

function draw() {
  let canvases = document.querySelectorAll('canvas');

  for (let canvas of canvases) {
    let ctx = canvas.getContext('2d');
    ctx.fillText('Filled', 10, 50);
    ctx.strokeText('Stroked', 10, 30);
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

setBlues();
draw();

<canvas id="canvas" class="changeToBlue" width="150" height="150"></canvas>
<canvas id="canvas2" width="150" height="150"></canvas>
<canvas id="canvas3" class="changeToBlue" width="150" height="150" style="background-color:gold"></canvas>

如何根据类名更改预填充的数据颜色属性？

How can I change the prefilled data-color attribute based on a classname?

html

css

jquery

attributes