最近做一个项目，需要绘制热力图，但是发觉现成的库封装都很不灵活
heatmap.js
百度Echarts
等都有封装
参考百度echarts的热力图插件，我整理了一下绘制热力图的思路
数据构成
[[x, y, cnt], [x, y, cnt]]
// x y 表示这个点在canvas上的位置
对canvas的简单封装
function Canvas(w, h) {
this.canvas = document.createElement('canvas')
this.canvas.width = w
this.canvas.height = h
}
Canvas.prototype.getContext = function() {
return this.canvas.getContext('2d')
}
Canvas.prototype.getCanvas = function(){
return this.canvas
}
创建canvas的每个点的渐变色
function creatHeadtMapCircle(size) {
const shadowBlur = size / 2
const r = size + shadowBlur
const offsetDistance = 1000
const circle = new Canvas(r * 2, r * 2)
let ctx = circle.getContext()
ctx.shadowBlur = shadowBlur
ctx.shadowColor = 'black'
ctx.shadowOffsetX = ctx.shadowOffsetY = offsetDistance
ctx.beginPath()
ctx.arc( r - offsetDistance, r2 - offsetDistance, size, 0, Mathi.PI * 2 , true)
ctx.closePath()
ctx.fill()
return circle
}
绘制单个点的结果
image.png
绘制多个点，根据权重值，可以得到如下的图形， 不同的权重 设置不同的透明度
image.png
创一个颜色映射
class ColorRange {
constructor (options) {
this.gradient = options.gradient || {
0.25: 'rgba(0, 0, 255, 1)',
0.55: 'rgba(0, 255, 0, 1)',
0.85: 'rgba(255, 255, 0, 1)',
1.0: 'rgba(255, 0, 0, 1)'
}
this.max = options.max || 30
this.min = options.min || 0
this.initPalette()
}
initPalette () {
const gradient = this.gradient
const canvas = new Canvas(256, 1)
const ctx = this.ctx = canvas.getContext()
const lineGradient = ctx.createLinearGradient(0, 0, 256, 1)
for (let key in gradient) {
lineGradient.addColorStop(parseFloat(key), gradient[key])
}
ctx.fillStyle = lineGradient
ctx.fillRect(0, 0, 256, 1)
}
getImageData (v ) {
const imageData = this.ctx,getImageData(0, 0, 256, 1).data
if (v === undefined) return imageData
if (v > this.max) v = this.max
if (v < this.min ) v = this.min
var index = Math.floor((v - min) / (max - min) * 255 ) * 4
return [imageData[index], imageData[index + 1], imageData[index + 2], imageData[index + 3]]
}
}
颜色映射
根据不同的绘图结果把不同的颜色透明度，映射到不同的颜色上，得到色彩图
let colored = sctx.getImageData(0, 0, canvas.width, canvas.height)
let gradient = (new ColorRange()).getImageData()
const opacity = 0.8
for(let i = 0, len = colored.data.length, j; i < len; i += 4) {
j = colored.data[i] * 4
if (colored.data[i] / 256 > opacity) colored.data[i] = 256 * opacity
colored.data[i - 3] = gradient[j]
colored.data[i - 2] = gradient[j + 1]
colored.data[i - 1] = gradient[j + 2]
}
ctx.putImageData(colored, 0, 0)
image.png
最后整理成一个快速好用的库，提供给大家
