如何让HTML Canvas中的矩形实现闪烁（Blink）效果？

嘿，我来帮你搞定这个矩形闪烁的问题！首先先提个小细节：你当前的代码里red矩形设置了两次top属性（top: 300和top: 800），后面的会覆盖前面的，记得删掉其中一个哦。

要实现矩形闪烁，核心思路是周期性修改矩形的视觉属性，然后触发画布重绘。下面给你两种常用的实现方式：

方式一：切换可见性实现闪烁 #

这种方式是让矩形每隔一段时间显示/隐藏，效果比较直接：

function Addrect() {
  // 修正重复的top属性，这里保留top: 300
  var red = new fabric.Rect({
    top: 300, 
    left: 100, 
    width: 350, 
    height: 350, 
    cornerSize: 40, 
    fill: 'green' 
  }); 
  canvas.add(red);

  // 开启闪烁定时器，每隔500ms切换一次可见性
  const blinkInterval = setInterval(() => {
    red.visible = !red.visible;
    canvas.renderAll(); // 必须调用此方法更新画布显示

    // 可选：如果需要在一段时间后停止闪烁，比如5秒后停止
    // setTimeout(() => clearInterval(blinkInterval), 5000);
  }, 500);
}

方式二：切换填充色实现柔和闪烁 #

如果觉得切换可见性太突兀，可以通过切换填充色（比如在实色和半透明色之间切换）来实现更柔和的闪烁效果：

function Addrect() {
  var red = new fabric.Rect({
    top: 300, 
    left: 100, 
    width: 350, 
    height: 350, 
    cornerSize: 40, 
    fill: 'green' 
  }); 
  canvas.add(red);

  let isOriginalColor = true;
  const blinkInterval = setInterval(() => {
    // 在绿色和半透明绿色之间切换
    red.fill = isOriginalColor ? 'rgba(0, 128, 0, 0.5)' : 'green';
    isOriginalColor = !isOriginalColor;
    canvas.renderAll();

    // 可选：停止闪烁的逻辑
    // setTimeout(() => clearInterval(blinkInterval), 5000);
  }, 500);
}

关键注意点： #

• 定时器的间隔时间（示例中的500）可以自定义：数值越小闪烁越快，越大则越慢。
• 若需要停止闪烁，一定要保存blinkInterval的引用，然后调用clearInterval(blinkInterval)。
• 必须调用canvas.renderAll()：Fabric.js不会自动检测属性变化并更新画布，手动触发重绘才能让修改生效。

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