当前框显示的阴影

Question

我已经将 ctx 设置为 shadowColor = "white";当我创建框时单击按钮并删除它。但是，我想在第二个红色框出现时删除第一个框的阴影颜色，并且阴影应该只应用于第二个框。应该就像当他们单击按钮时，第一个框会变成红色并带有阴影，然后会转到第二个框。第二个框将变成红色并带有阴影，而第一个框将变回灰色背景色但没有阴影。请帮忙。谢谢..

您可以在此处访问代码： https://codesandbox.io/s/elastic-kare-hwkq2?file=/index.html:0-2151

  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
      },
      {
        name: "6",
        x: 200,
        y: 21,
        width: 80,
        height: 80,
        bgColor: "#00FF00",
        radius: 2
      }
    ];
    var c = document.getElementById("NodeList");
    var ctx = c.getContext("2d");

    ctx.strokeStyle = "black";

    // set initial blur of 3px
    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 = "gray";
      ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
      ctx.fillStyle = "black";

      ctx.stroke();
    }
    $("#k").click(function () {
      for (let i = 0; i < data.length; i++) {
        const _data = data[i];
        ctx.beginPath();
        //ctx.shadowColor = "gray";
        setTimeout(function () {
          if (i != 0) {
            ctx.fillStyle = "gray";
            ctx.shadowColor = "#0f172b";
            ctx.shadowBlur = 0;
            ctx.fillRect(
              data[i - 1].x,
              data[i - 1].y,
              data[i - 1].width,
              data[i - 1].height
            );
            ctx.fill();
          }
          ctx.shadowColor = "white";
          ctx.shadowBlur = 25;
          ctx.fillStyle = "red";
          ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
          ctx.fill();
        }, 2000 * i);
      }
    });

body { background: #0f172b; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="NodeList" width="400" height="100"></canvas>
<button id="k">Hello</button>

Answer 1

始终在每一帧清除所有内容并重绘所有内容。

然后，您可以定义一个简单的 draw() 函数，您将在每一帧调用该函数。这个绘图函数应该尽可能与状态无关，这样你就可以处理它之外的状态变化，并且它会正确渲染。

这里是在绘制突出显示的形状时设置上下文样式的简单问题，即只需标记突出显示的形状即可。

var data = [
  {
    x: 20,
    y: 21,
    width: 80,
    height: 80,
  },
  // for horizontal
  {
    x: 110,
    y: 21,
    width: 80,
    height: 80,
  },
  {
    x: 200,
    y: 21,
    width: 80,
    height: 80,
  }
];
var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");

let highlighted = -1; // the index of the shape we want to highlight
// a single function to draw every frame
function draw() {
  // clear all
  ctx.clearRect(0, 0, c.width, c.height);
  // redraw all
  for (let i = 0; i < data.length; i++) {
    // loop through the data array
    const _data = data[i];
    const is_highlighted = i === highlighted;
    // set the context's style depending on if we are highlighted or not
    ctx.fillStyle = is_highlighted ? "red" : "gray";
    ctx.shadowColor = is_highlighted ? "white" : "transparent";
    ctx.shadowBlur = is_highlighted ? 25 : 0;
    // fillRect doesn't need beginPath()
    ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
  }
}
$("#k").click(function () {
  for (let i = 0; i < data.length; i++) {
    setTimeout(function () {
      highlighted = i;
      draw();
    }, 2000 * i);
  }
});
// initial all gray
// highlighted is currently -1, which points to no shape
draw();

body { background: #0f172b; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="NodeList" width="400" height="100"></canvas>
<button id="k">Hello</button>

当前框显示的阴影

Shadow to current box showing

jquery

for-loop

canvas