深入浅出：零基础实现 Canvas 热力图可视化 | 从原理到实战

好_快
973 阅读5分钟

Canvas热力图实现原理详解

前言

作为一名前端工程师，你可能遇到过需要展示数据密度分布的场景。热力图(Heatmap)是一种非常直观的可视化方案，本文将从零开始，详细讲解如何使用Canvas实现热力图效果。

本文的实现方案主要参考和学习自开源库 heatmap.js，在此特别感谢该项目的贡献者们。

热力图原理

1. 基本概念

热力图通过颜色的深浅来展示数据的密集程度，主要应用于：

  • 用户点击行为分析
  • 地理数据展示
  • 传感器数据可视化
  • 人流量分布展示

2. 实现思路

热力图的核心原理是:

  1. 将数据点转换为具有渐变效果的圆形
  2. 重叠区域的颜色叠加会产生更深的颜色
  3. 最后对整体进行颜色映射得到最终效果

3. 技术要点

在开始实现之前，需要了解以下关键概念：

  1. Canvas坐标系统
  • 原点(0,0)位于左上角
  • x轴正方向向右
  • y轴正方向向下
  1. 数据结构设计

// 热力图数据结构
const sampleData = {
    min: 0, // 最小值
    max: 10, // 最大值
    data: [ // 数据点列表
        {
            x: number, // x坐标
            y: number, // y坐标
            value: number, // 数值
            radius: number // 影响半径
        }]
}

// 热力图配置
const heatmapConfig = {
    defaultRadius: 20, // 默认半径
    defaultBlur: 0.6, // 模糊因子
    defaultGradient: { // 渐变配色
        0.0: 'rgb(0, 0, 255)', // 蓝色 - 最低值
        0.2: 'rgb(0, 150, 255)', // 浅蓝色
        0.4: 'rgb(0, 255, 150)', // 青绿色
        0.6: 'rgb(0, 255, 0)', // 绿色
        0.8: 'rgb(255, 255, 0)', // 黄色
        0.9: 'rgb(255, 150, 0)', // 橙色
        1.0: 'rgb(255, 0, 0)' // 红色 - 最高值
    },
    defaultOpacity: 0.9, // 整体不透明度
    defaultMaxOpacity: 0.9, // 最大不透明度
    defaultMinOpacity: 0.4 // 最小不透明度
}

实现过程

1. 创建热力点模板

热力点模板是热力图实现的基础，它定义了单个数据点的视觉表现形式。我们使用径向渐变（Radial Gradient）创建一个从中心向外扩散的圆形模板：

  1. 创建一个离屏Canvas作为模板，尺寸为热力点半径的两倍，这样可以完整容纳整个热力点的渐变效果
  2. 使用createRadialGradient创建径向渐变，从圆心(radius, radius)开始，扩散到边缘
  3. 通过设置三个渐变断点来控制透明度的过渡：
  • 中心点(0)设置为完全不透明：rgba(0,0,0,1)
  • 中间位置(0.5)设置为半透明：rgba(0,0,0,0.5)
  • 边缘处(1.0)设置为完全透明：rgba(0,0,0,0)

heatpoint-template.png

这种渐变设计的优势在于：

  • 平滑的透明度过渡确保热力点之间能自然融合
  • 边缘完全透明避免了热力点之间的硬边界
  • 中心点不透明度最高，更好地表达数据点的具体位置

function getHeatPointTemplate(radius, blurFactor) {
    const tplCanvas = document.createElement('canvas')
    const tplCtx = tplCanvas.getContext('2d', {
        willReadFrequently: true,
        alpha: true,
    })
    if (!tplCtx) {
        throw new Error('Failed to get canvas context')
    }
    // 增加canvas尺寸，确保渐变效果完整
    const size = radius * 2
    tplCanvas.width = size
    tplCanvas.height = size
    const gradient = tplCtx.createRadialGradient(
        radius, radius, 0, // 内圆从中心点开始
        radius, radius, radius // 外圆到边缘
    )
    // 调整渐变透明度
    gradient.addColorStop(0, 'rgba(0,0,0,1)') // 中心点完全不透明
    gradient.addColorStop(0.5, 'rgba(0,0,0,0.5)')// 中间点半透明
    gradient.addColorStop(1, 'rgba(0,0,0,0)') // 边缘完全透明
    tplCtx.fillStyle = gradient
    tplCtx.fillRect(0, 0, size, size)
    return tplCanvas
}

2. 绘制黑白热力图

黑白热力图是通过叠加多个热力点模板，利用Canvas的透明度叠加特性来实现数据密度的可视化：

  1. 对每个数据点：
  • 根据数据值计算透明度：(value - min) / (max - min)
  • 设置最小透明度0.01，确保即使是最小值也能有微弱的可见度
  • 使用globalAlpha控制整个热力点的透明度
  1. 透明度叠加原理：
  • 当多个半透明的热力点重叠时，Canvas会自动将它们的alpha值叠加
  • 重叠区域的颜色会变得更深，自然形成了数据密集区域的视觉效果
  • 叠加的结果是非线性的，这种非线性特性恰好符合热力图的视觉表现需求

blackwhite-heatmap.png

function drawBlackRadialGradientImage(context, mapData) {
    const { min, max, data } = mapData
    // 清除之前的绘制内容
    context.clearRect(0, 0, context.canvas.width, context.canvas.height)
    data.forEach(point => {
        const alpha = Math.min((point.value - min) / (max - min), 1)
        context.globalAlpha = alpha < 0.01 ? 0.01 : alpha
        const template = getHeatPointTemplate(point.radius, heatmapConfig.defaultBlur)
        context.drawImage(
            template,
            point.x - point.radius,
            point.y - point.radius
        )
    })
}

3. 颜色映射处理

颜色映射是将黑白热力图转换为彩色的关键步骤，这个过程分为两个主要部分：

  1. 创建颜色映射表（getColorPalette）：
  • 使用256x1的小型Canvas创建线性渐变
  • 将配置中的颜色断点映射到0-255的范围
  • 获取渐变的像素数据作为查找表
  • 这种方式可以得到平滑的颜色过渡，支持任意数量的颜色断点
  1. 应用颜色映射（drawColourfulRadialGradientImage）：
  • 获取画布的像素数据
  • 找到最大alpha值用于归一化，确保颜色映射充分利用整个配色方案
  • 对每个像素：
    • 计算归一化的alpha值：alpha / maxAlpha
    • 将归一化值映射到颜色表索引(0-255)
    • 从颜色表中获取对应的RGB值
    • 保持适当的透明度以维持层次感

这种实现方式的优势：

  • 颜色映射和透明度处理分离，便于独立调整
  • 使用查找表提高性能，避免重复计算
  • 支持复杂的渐变配色方案
  • 通过透明度保持了数据的精确性
// 获取颜色映射表
function getColorPalette(config) {
    const gradientConfig = config.defaultGradient
    const paletteCanvas = document.createElement('canvas')
    const paletteCtx = paletteCanvas.getContext('2d', {
        willReadFrequently: true,
        alpha: true,
        })

    if (!paletteCtx) {
        throw new Error('Failed to get canvas context')
    }
    paletteCanvas.width = 256
    paletteCanvas.height = 1
    const gradient = paletteCtx.createLinearGradient(0, 0, 256, 1)
    for (const key in gradientConfig) {
        gradient.addColorStop(+key, gradientConfig[key])
    }
    paletteCtx.fillStyle = gradient
    paletteCtx.fillRect(0, 0, 256, 1)
    return paletteCtx.getImageData(0, 0, 256, 1).data
}

// 绘制彩色热力图
function drawColourfulRadialGradientImage(context) {
    const width = context.canvas.width
    const height = context.canvas.height
    const imageData = context.getImageData(0, 0, width, height)
    const pixels = imageData.data
    const palette = getColorPalette(heatmapConfig)
    // 找到最大alpha值，用于归一化
    let maxAlpha = 0
    for (let i = 3; i < pixels.length; i += 4) {
        maxAlpha = Math.max(maxAlpha, pixels[i])
    }
    // 处理每个像素
    for (let i = 3; i < pixels.length; i += 4) {
        const alpha = pixels[i]
        if (!alpha) continue
        // 归一化alpha值到[0,1]区间
        const normalizedAlpha = alpha / maxAlpha
        // 计算颜色索引 (0-255)
        const colorIndex = Math.min(Math.floor(normalizedAlpha * 255), 255)
        const offset = colorIndex * 4
        // 设置RGB值
        pixels[i - 3] = palette[offset] // R
        pixels[i - 2] = palette[offset + 1] // G
        pixels[i - 1] = palette[offset + 2] // B
        // 设置适当的透明度
        pixels[i] = Math.floor(alpha * heatmapConfig.defaultOpacity)
    }
    context.putImageData(imageData, 0, 0)
}

Demo

结语

希望这篇文章能帮助你理解热力图的实现原理，并在实际项目中得到应用。同时也建议查看 heatmap.js 项目源码，学习更多实现细节。

avatar
文章
阅读
粉丝