HTML5 Canvas可纯原生实现动态热力图：先配置Canvas环境并适配高清屏，再将坐标数据映射为归一化像素矩阵，通过RGBA逐格绘制或ImageData填充实现渐变着色，最后用requestAnimationFrame驱动带淡出效果的帧更新。
在HTML5中用Canvas绘制动态热力图，核心是将数据映射为颜色强度，并通过逐帧更新实现“动态”效果。不需要第三方库，纯Canvas API就能完成，关键在于数据归一化、颜色插值和性能优化。
准备Canvas环境与基础配置
先创建一个<canvas>元素并获取2D上下文，设置合适的宽高（建议用devicePixelRatio适配高清屏）：
- 用
canvas.width和canvas.height设逻辑尺寸，再用CSS控制显示尺寸 - 调用
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)提升清晰度 - 清空画布推荐用
ctx.clearRect(0, 0, width, height)，比重绘背景更高效
将原始数据转换为热力图像素矩阵
热力图本质是二维密度分布。假设有坐标数组points = [{x: 120, y: 80, value: 3.2}, ...]：
- 遍历所有点，在离散网格（如64×64）上累加权重：对每个点，计算其影响范围内的格子（常用高斯核），按距离衰减叠加
value - 归一化：找出矩阵最大值
maxVal，把每个格子值转为0–1区间：normalized = Math.min(1, cellValue / maxVal) - 避免每帧重复计算——若数据变化不大，可只更新受影响区域，或使用Web Worker预处理大数据集
用渐变色实现平滑热力着色
不直接画点，而是渲染一个带透明度的彩色层覆盖底图：
立即学习“前端免费学习笔记（深入）”；
- 创建
ImageData对象，手动填充RGBA像素：对每个网格单元，根据归一化值查色表（如蓝→绿→黄→红），设alpha增强叠加感 - 或更轻量方式：用
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`，配合ctx.fillRect(x, y, 1, 1)逐格绘制（适合中小规模，如≤200×200） - 推荐色表示例：
[[0,0,255,0.6], [0,255,0,0.8], [255,255,0,0.9], [255,0,0,1]]，用线性插值得中间色
实现动态更新与帧率控制
“动态”指数据随时间变化（如实时定位、传感器流）：
- 用
requestAnimationFrame驱动循环，避免setInterval导致丢帧 - 每帧只更新部分数据：例如保留最近30秒点，老数据权重按时间衰减，或用滑动窗口滚动刷新矩阵
- 加淡出效果提升观感：每帧用半透明黑色覆盖全画布（
ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0,0,w,h)），再叠加热力层，自然形成轨迹拖尾
整个过程不依赖框架，几十行核心代码即可跑起来。重点不在“画得多炫”，而在于数据到颜色的映射是否合理、帧间更新是否稳定。实际项目中可结合OffscreenCanvas做离屏渲染，进一步解耦计算与绘制。
