Javascript Canvas使用setInterval绘制时透明度逐渐增强问题排查

原因分析 #

• 数组无限增长导致叠加绘制：你的myarr数组每次执行start时都会添加10个新元素，但从未被清空，数组长度随时间不断增加。每次调用drawarray都会绘制数组中所有历史元素，每个矩形都是0.2透明度的红色，叠加次数越多，对应区域红色越浓，看起来就像“透明度逐渐增强（更不透明）”。
• globalAlpha未重置：你在绘制循环中设置了ctx.globalAlpha = 0.2，但绘制完成后没有恢复为默认值1，会影响后续任何基于该上下文的绘制操作。

修复方案 #

1. 在start函数开头清空myarr，确保每次只绘制当前批次的元素；
2. 绘制完成后重置globalAlpha为默认值。

修改后的代码 #

HTML部分 #

<canvas id="myCanvas" width="500" height="150" style="border:1px solid black;">
</canvas>

JavaScript部分 #

canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");

const inter = setInterval(start, 1000);
i = 0;
myarr = [];

function drawarray(arr){
  // 先设置透明度
  ctx.globalAlpha = 0.2;
  ctx.fillStyle = "red";
  
  for ( var k = 0; k<arr.length; k++){
    ctx.fillRect(canvas.width-90-i*50,arr[k][0]*5,10,2);
  }
  
  // 重置透明度为默认值
  ctx.globalAlpha = 1;
}

function start() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 清空数组，只保留当前批次的元素
  myarr = [];
  for ( var e=0; e<10;e++){
    myarr.push([e,Math.random().toFixed(1)]);
  }
  drawarray(myarr);
  i++;
}

function stop() {
  clearInterval(inter);
}

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