如何实现点击按钮后仅为显示的红色canvas矩形添加阴影

问题原因 #

canvas的2D上下文属性是全局生效的，你在初始化绘制黑色方块时设置了shadowColor和shadowBlur，之后所有的绘制操作都会默认沿用这两个属性，所以不管点击按钮与否，所有绘制的图形都会自带阴影。

解决方法 #

我们只需要在不需要阴影的绘制操作前后重置阴影属性即可，具体修改逻辑如下：

1. 初始化绘制黑色方块时不设置阴影，绘制完成后重置全局阴影属性，保证后续默认绘制不带阴影
2. 点击按钮绘制红色方块前，先设置你需要的阴影参数，绘制完成后立刻重置阴影属性，避免影响其他操作

修改后的完整代码 #

JS代码

var data = [
  {
    name: "1",
    x: 20,
    y: 21,
    width: 80,
    height: 80,
    bgColor: "#00FF00",
    radius: 2,
    version: "1.0.0"
  },
  // 横向方块配置
  {
    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++) {
  const _data = data[i];
  ctx.beginPath();
  ctx.fillStyle = "black";
  // 初始绘制黑色方块不需要阴影，不设置阴影属性即可
  ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
  ctx.stroke();
}
// 初始化绘制完成后重置全局阴影，避免影响后续操作
ctx.shadowBlur = 0;
ctx.shadowColor = "transparent";

$("#k").click(function () {
  ctx.strokeStyle = "black";
  for (let i = 0; i < data.length; i++) {
    const _data = data[i];
    setTimeout(function () {
      ctx.beginPath();
      ctx.fillStyle = "red";
      // 绘制红色方块前设置目标阴影参数
      ctx.shadowColor = "white";
      ctx.shadowBlur = 3;
      ctx.fillRect(_data.x, _data.y, _data.width, _data.height);
      ctx.stroke();
      // 绘制完成后立刻重置阴影，避免影响其他绘制
      ctx.shadowBlur = 0;
      ctx.shadowColor = "transparent";
    }, 100 * i);
  }
});

HTML代码

<!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>

内容的提问来源于stack exchange，提问作者TechDev