基于simpleheat的Canvas热力图如何添加发光后期处理效果

针对你用simpleheat开发Canvas热力图时遇到的发光效果问题，下面提供几种原生Canvas实现方案，替代Pixi Filters的思路：

方法1：双层Canvas叠加（模糊底+原图层） #

通过两个Canvas分层绘制，底层做模糊处理模拟发光，上层绘制正常热力图，叠加后就能得到类似示例的效果：

<div style="position: relative;">
  <canvas id="heat-blur" style="position: absolute; top: 0; left: 0; filter: blur(12px); opacity: 0.8;"></canvas>
  <canvas id="heat-normal" style="position: absolute; top: 0; left: 0;"></canvas>
</div>

<script>
// 初始化两个simpleheat实例
const blurHeat = simpleheat('heat-blur');
const normalHeat = simpleheat('heat-normal');

// 传入相同的热力点数据
const heatData = [/* 你的热力点数组，格式如[x, y, value] */];
blurHeat.data(heatData);
normalHeat.data(heatData);

// 调整模糊层的渐变，增强发光的层次感
blurHeat.gradient({
  0.4: 'rgba(0, 0, 255, 0.3)',
  0.65: 'rgba(0, 255, 255, 0.5)',
  0.85: 'rgba(255, 255, 0, 0.7)',
  1.0: 'rgba(255, 0, 0, 0.9)'
});

// 分别绘制两个图层
blurHeat.draw();
normalHeat.draw();
</script>

方法2：单Canvas内置滤镜叠加 #

直接在同一个Canvas上先绘制模糊版本，再叠加原图，无需额外DOM元素：

const heat = simpleheat('heatmap');
heat.data(/* 你的热力点数据 */);
heat.draw();

const ctx = heat._canvas.getContext('2d');
// 保存当前热力图的像素数据
const originalImage = ctx.getImageData(0, 0, heat._width, heat._height);

// 绘制模糊层作为发光基底
ctx.filter = 'blur(8px)';
ctx.putImageData(originalImage, 0, 0);

// 恢复滤镜，叠加半透明的原图
ctx.filter = 'none';
ctx.globalAlpha = 0.7;
ctx.putImageData(originalImage, 0, 0);

方法3：调整simpleheat自身参数模拟发光 #

通过增大热力点半径、优化渐变透明度，从渲染逻辑本身实现发光感：

const heat = simpleheat('heatmap');
// 扩大半径让热力扩散范围更广
heat.radius(30);
// 调整渐变，让低透明度的淡色覆盖更大范围
heat.gradient({
  0.0: 'rgba(0, 0, 255, 0)',
  0.3: 'rgba(0, 0, 255, 0.2)',
  0.5: 'rgba(0, 255, 255, 0.4)',
  0.7: 'rgba(255, 255, 0, 0.6)',
  0.9: 'rgba(255, 0, 0, 0.8)',
  1.0: 'rgba(255, 0, 0, 1)'
});
heat.data(/* 你的热力点数据 */);
heat.draw();

关于Pixi Filters失效的原因 #

simpleheat基于原生Canvas API渲染，和PixiJS的WebGL渲染上下文不兼容，直接套用Pixi的滤镜会因为上下文环境不同而无法生效，所以更适合用上述原生Canvas方案实现。

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