请问这段代码,canvas绘制的时候效果出不来是什么原因?没报错没效果

`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();
            })`

最佳答案

  1. val 不存在
  2. data 不存在

把你没写的东西加了。
然后通过修改颜色测试,发现其实其实是有,只不过很偏。
然后就可以定位到问题了。因为弧度太小。那个色块正好是透明区域http://jsrun.pro/AJWKp/edit

clipboard.png
image.png