多次绘制温度图

Question

我正在做一个业余爱好项目。我每 2 小时加载一次具有不同值（点）的温度图。我在使用 DrawLow 函数时遇到问题。多次绘制温度图会出现罕见的问题。他记得他的颜色值。我怎样才能更改颜色值/多边形等。重置以便渲染良好。

如果重新加载页面，问题就解决了。但是没有重新加载这个错误就会出现！而且我不想重新加载我的页面！

我已经给图书馆的作者发了邮件。他已经上传了新的更新，但是问题还没有解决。

我自己尝试过的：
清除 canvas: ctx0.clearRect(0, 0, can0.width, can0.height);
重新加载 temperatureMap.js：$('#temperatureMapScript').remove(); $.getScript("Scripts/temperatureMap.js", function () { $('script:last').attr('id', 'temperatureMapScript');
重新加载canvas：$("#canvast1").load(location.href + " #canvast1");

我使用的代码是：

var can0 = document.getElementById("canvast1"); // Get the canvas object
var ctx0 = can0.getContext("2d");           // Get the canvas context
    var drw0 = new TemperatureMap(ctx0);        // Create the object 
    ctx0.clearRect(0, 0, can0.width, can0.height); //Clear the canvas!
dataSet.d.forEach(function(dataSet) {
        listPoints.push(dataSet);
    });
  drw0.setPoints(listPoints, 500, 500);
    drw0.drawLow(5, 8, true, function () { // 5 = Number of closer influent points
        // 8 = Quality parameter [2, 32]
        //false = clean polygon outside
    drw0.drawPoints();    
    });

我认为这个错误与 canvas createRadialGradient / color 元素有关。谁能帮我正确重置 canvas?

First time run(good one)
Second time run(buggy one)

Answer 1

我解决了这个问题

draw low 方法（在 temperatureMap 库中）必须包含此行，因为 canvas 元素会记住之前的状态！

ctx.width += 0;   //Resizing the canvas will cause the canvas to get cleared.
ctx.fillStyle = "#191919"; //must be filled white for properly rendering before setting the gradient

多次绘制温度图

Draw temperature maps multiple times after each other

html

javascript

jquery

canvas

heatmap