Question

我是画布/jQuery 的新手。我只想在单击按钮后显示每个红色框时才应用阴影。目前，即使单击或未单击按钮，它也会显示所有框都有阴影。请问，有什么办法可以让每个红色的盒子都应用阴影吗？谢谢

这里可以访问代码：https://codesandbox.io/s/happy-beaver-q9tcg?file=/index.html

var data = [
  {
    name: "1",
    x: 20,
    y: 21,
    width: 80,
    height: 80,
    bgColor: "#00FF00",
    radius: 2,
    version: "1.0.0"
  },
  // for horizontal
  {
    name: "5",
    x: 110,
    y: 21,
    width: 80,
    height: 80,
    bgColor: "#00FF00",
    radius: 2
  }
];
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");

ctx.strokeStyle = "black";
for (let i = 0; i < data.length; i++) {
  // loop through the data array
  const _data = data[i];
  ctx.beginPath(); // Call beginPath before drawing any shape
  ctx.fillStyle = "black";
  ctx.shadowColor = "white";
  // set initial blur of 3px
  ctx.shadowBlur = 3;
  ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
  ctx.fillStyle = "black";

  ctx.stroke();
}
$("#k").click(function () {
  ctx.strokeStyle = "black";
  for (let i = 0; i < data.length; i++) {
    // loop through the data array
    const _data = data[i];
    setTimeout(function () {
      ctx.beginPath(); // Call beginPath before drawing any shape
      ctx.fillStyle = "red";
      ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
      ctx.fillStyle = "black";

      ctx.stroke();
    }, 100 * i);
  }
});

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
    type="text/javascript"
  ></script>
</head>
<body style="background: gray;">
  <canvas id="NodeList" width="400" height="100"></canvas>
  <button id="k">Hello</button>
</body>
</html>

仅在单击按钮后显示的每个红色框时应用阴影

0 个答案: