Question

我正在做一个爱好项目。我每2小时加载一个具有不同值（点）的温度图。我遇到了DrawLow函数的问题。相互之后多次绘制温度图会产生罕见问题。他记得他的颜色值。如何更改颜色值/多边形等重置以使其呈现良好。

如果您重新加载页面，那么它可以解决问题。但是没有重新加载这个错误就出现了！我不想重新加载我的页面！

我已通过电子邮件发送了图书馆的作者。他上传了一个新的更新，但问题还没有解决。

我自己尝试了什么：
清除画布：ctx0.clearRect(0, 0, can0.width, can0.height);
重新加载temperatureMap.js：$('#temperatureMapScript').remove(); $.getScript("Scripts/temperatureMap.js", function () { $('script:last').attr('id', 'temperatureMapScript');
重新加载画布：$("#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();    
    });

我认为这个bug与canvas createRadialGradient / color元素有关。任何人都可以帮我正确地重置画布吗？

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

相互绘制温度图多次

1 个答案: