Canvas粒子系统背景设为透明后出现白色背景的技术咨询

问题出在你用fillStyle = '#1d1d1d00'填充画布的方式——透明填充色并不会清除之前绘制的粒子轨迹，旧粒子图像持续叠加，再加上页面默认的白色背景，就会出现你看到的白色区域。

正确的做法是替换填充操作，使用clearRect清除画布，每次重绘前清空画布内容，就能让Canvas背景完全透明，正常显示下方的视频。

修改后的repaint方法代码：

particleSystem.prototype.repaint = function() {
  // 清空画布，而非填充透明色
  this.ctx.clearRect(0, 0, this.width, this.height);
};

额外注意两点：

• 检查Canvas元素的CSS样式，确保没有设置background-color属性
• 无需修改页面body或父容器的默认背景，Canvas透明后会直接透出下方的视频内容

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