`let context = heatMap.getContext("2d");
//heatMap就是canvas了
if (data.length <= 0) {
data = [
{x: 471, y: 277, value: 25},
{x: 438, y: 375, value: 97},
{x: 373, y: 19, value: 71},
{x: 473, y: 42, value: 63},
{x: 463, y: 95, value: 97},
{x: 590, y: 437, value: 34},
{x: 377, y: 442, value: 66},
{x: 171, y: 254, value: 20},
{x: 6, y: 582, value: 64},
{x: 387, y: 477, value: 14},
{x: 300, y: 300, value: 80}
];
}
let min = Math.min.apply(null, val);
let max = Math.max.apply(null, val);
data.forEach((item) => {
let {x, y, value} = item;
context.beginPath();
context.arc(x, y, 10, 0, .2 * Math.PI);
context.closePath();
// 创建渐变色: r,g,b取值比较自由,我们只关注alpha的数值
let radialGradient = context.createRadialGradient(x, y, 0, x, y, 10);
radialGradient.addColorStop(0.0, "rgba(0,0,0,1)");
radialGradient.addColorStop(1.0, "rgba(0,0,0,0)");
context.fillStyle = radialGradient;
// 设置globalAlpha: 需注意取值需规范在0-1之间
let globalAlpha = (value - min) / (max - min);
context.globalAlpha = Math.max(Math.min(globalAlpha, 1), 0);
// 填充颜色
context.fill();
})`
把你没写的东西加了。
然后通过修改颜色测试,发现其实其实是有,只不过很偏。
然后就可以定位到问题了。因为弧度太小。那个色块正好是透明区域。http://jsrun.pro/AJWKp/edit