纯HTML无法直接绘制热力图，需借助canvas、SVG或第三方库；原生标签仅能模拟简陋色块，不推荐真实应用；canvas手动绘制适合中小规模坐标点。
纯 HTML 无法直接绘制热力图——它没有绘图能力，必须借助 canvas、SVG 或第三方库（如 Leaflet + heatmap.js、D3.js）来实现可视化。原生 HTML 标签（div、table）只能模拟极简网格色块，不推荐用于真实数据热力图。
用 canvas 手动绘制热力图（轻量、可控）
适合中小规模坐标点（getImageData/putImageData 累积计算。
-
canvas必须设置明确的width和height属性（非 CSS 缩放），否则像素会失真 - 每个数据点建议先归一化到 canvas 坐标系（例如
x = point.x * canvas.width / maxX） - 用高斯函数生成半径内衰减权重，避免简单“画圆”导致边缘锯齿或色块感过重
- 最终颜色映射推荐用数组查表（
const colors = ['#000', '#ff0', ...]），比hsl()插值更稳定
const ctx = canvas.getContext('2d');
const data = [{x: 120, y: 80, value: 5}, {x: 200, y: 150, value: 12}];
// 累积绘制逻辑略 —— 关键是遍历每个点，在其周围像素上叠加加权 alpha 值用 heatmap.js 快速集成（最常用）
专为热力图设计的轻量库（
- 初始化时传入的
container必须是已挂载的 DOM 元素，且宽高不为 0 - 数据格式严格要求为
{x, y, value}（像素坐标）或{lat, lng, value}（地图模式） -
radius单位是像素，设太小看不出热区，太大则糊成一片；建议从20–40开始调 - 修改配色需替换
gradient对象，不是 CSS —— 错误写法：heatmap.setOptions({ gradient: 'red, blue' })
const heatmapInstance = h337.create({
container: document.getElementById('heatmap'),
radius: 30,
gradient: {
'.2': 'blue',
'.5': 'yellow',
'.8': 'red'
}
});
heatmapInstance.setData({ max: 100, data: [{x: 100, y: 50, value: 42}] });在地图上叠加热力图（Leaflet + leaflet.heat）
当数据含地理坐标（经纬度）时，直接用 leaflet.heat 最省事。它本质是 heatmap.js 的 Leaflet 封装，自动处理投影转换。
立即学习“前端免费学习笔记（深入）”；
- 数据必须是
[lat, lng, value]三元组数组，顺序不能错（不是{lat, lng, value}） - Leaflet 地图容器需提前设置
crs: L.CRS.EPSG3857（默认就是），否则热力图偏移 - 热力图图层要调用
addTo(map)，不能直接 append 到 DOM - 性能瓶颈在大量点（>5k）：可先用
supercluster聚合，再传聚合后中心点+总权重
const heat = L.heatLayer([
[39.91, 116.40, 0.3],
[39.92, 116.41, 0.7]
], { radius: 25 });
heat.addTo(map);真正难的不是“怎么画出来”，而是数据预处理：坐标归一化是否准确、权重是否合理、稀疏区域如何平滑、移动端像素比（window.devicePixelRatio）是否补偿——这些细节不处理，热力图看起来永远像毛玻璃贴图。
