求助：如何在HTML Canvas中实现圆形闪烁效果

我看了你想要实现圆形在Canvas上一秒显示、一秒隐藏的闪烁效果，目前你的代码里有几个小问题导致效果没达到预期，我来帮你修正并解释下问题所在~

代码里的问题点 #

• 语法错误：ctx.fill;少了括号，应该写成ctx.fill();，不然填充操作根本不会执行
• 路径未重置：每次绘制圆弧前没有调用ctx.beginPath();，Canvas的路径是累积的，不重置的话会重复叠加路径，导致绘制异常
• 冗余代码：else分支里的ctx.fill();完全多余，因为这个分支的目的是清空画布，不需要执行填充

修正后的完整代码 #

JavaScript部分

var x = 0;
var y = 0;
var change = true;
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

function main() {
  if (change) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    x = Math.floor(Math.random() * (canvas.width));
    y = Math.floor(Math.random() * (canvas.height));
    document.getElementById("x").innerHTML = x;
    document.getElementById("y").innerHTML = y;
    
    ctx.fillStyle = "Green";
    // 每次绘制前开启新路径，避免路径累积
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI);
    // 修正语法错误，调用fill方法
    ctx.fill();
    
    document.getElementById("cw").innerHTML = canvas.width;
    document.getElementById("ch").innerHTML = canvas.height;
    document.getElementById("letter").innerHTML = "change = true";
    change = !change;
  } else {
    document.getElementById("letter").innerHTML = "change = false";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    change = !change;
  }
}
setInterval(main, 1000); // 每1秒调用一次main函数

HTML部分

<canvas id="myCanvas" width="300" height="200" style="border: 2px solid salmon; background-color: lightblue;"></canvas>
<p id="letter"></p>
Width of the canvas is :
<p id="cw"></p>
Height of the canvas is :
<p id="ch"></p>
<br>
    Dots position
<br><br>
    x =
<p id="x"></p>
y =
<p id="y"></p>

修正后的逻辑说明 #

• 当change为true时：清空画布 → 随机生成圆形坐标 → 开启新路径绘制绿色圆形并填充 → 更新页面上的状态和坐标文本 → 切换change状态
• 当change为false时：清空画布 → 更新状态文本 → 切换change状态
• 通过setInterval每1秒触发一次状态切换，就能实现圆形一秒显示、一秒隐藏的闪烁效果啦

备注：内容来源于stack exchange，提问作者ofey