canvas绘制统计热点图的核心是数据密度节奏、自然颜色过渡与稳定帧率，全程使用原生api：高清画布适配、网格化高斯加权、归一化映射、rgba像素级着色（动态alpha+色表插值）、requestanimationframe驱动时间衰减动画及半透明拖尾效果。
Canvas 绘制带动画效果的统计热点图，核心不是“画得炫”，而是让数据密度变化有节奏、颜色过渡自然、帧率稳定不卡顿。整个过程完全用原生 Canvas API 实现，无需任何图表库。
准备高清晰度 Canvas 画布
先确保画布在高清屏上不模糊：
- 用
canvas.width和canvas.height设置逻辑分辨率（比如 800×600） - 再用 CSS 控制显示尺寸（如
style="width:100%; height:auto;"） - 调用
ctx.scale(devicePixelRatio, devicePixelRatio)提升像素精度 - 清空画布统一用
ctx.clearRect(0, 0, width, height)，比重绘背景快得多
把坐标点转成热力网格矩阵
热点图本质是空间密度分布。假设有实时坐标流：points = [{x: 240, y: 180, value: 1.2}, ...]：
- 定义一个固定大小的网格（如 128×128），遍历每个点，在其周围格子按高斯衰减叠加权重
- 归一化处理：找出当前矩阵最大值，每个格子值映射为
0–1区间，便于后续着色 - 若数据更新频繁，只重算受影响区域；若量大，可用 Web Worker 预处理
用 RGBA 像素级着色实现平滑渐变
避免用多个 fillRect 拼接，直接操作像素更高效：
- 创建
ImageData对象，遍历每个网格单元，查色表（如蓝→青→黄→红）并计算对应 RGBA 值 - alpha 不设固定值，而是随强度提升（例如
alpha = normalized * 0.8 + 0.1），增强叠加感 - 色表示例：
[[0,100,255,0.6], [0,255,180,0.75], [255,220,0,0.9], [255,40,0,1]]，线性插值生成中间色
用 requestAnimationFrame 实现流畅动画
“动”体现在数据随时间演化，而非单纯刷新：
- 用
requestAnimationFrame驱动主循环，避免 setInterval 丢帧或掉帧 - 每帧保留最近 N 秒的数据点，老点按时间衰减权重（如指数衰减）
- 加一层淡出效果：每帧开头用半透明黑色覆盖全画布（
ctx.fillStyle = 'rgba(0,0,0,0.03)'; ctx.fillRect(0,0,w,h)），再叠加热力层，自然形成拖尾轨迹
