如何在不破坏画布的情况下刷新数据

Question

我有一个基本的天气应用程序，该应用程序从Forecast.io获取数据，并使用相关的skycons显示图标，该图标使用html5画布绘制和设置图标动画

一切似乎都正常，但我必须定期更新天气，而不必刷新整个页面，而jQuery Ajax加载方法似乎是我的问题的答案。 文本数据可以很好地刷新并获取新信息，但是画布似乎坏了。

我设法找出问题所在。 看来我不明白HTML画布的工作原理。
这是一个更简单的问题

此代码绘制一个红色矩形，并使用jquery load方法刷新页面的一部分

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="container">
    <div id="weather">
        <canvas id="icon"></canvas>
    </div>
</div>


<script>
    var i = document.getElementById('icon');
    var c = i.getContext('2d');
    c.fillStyle = "red";
    c.fillRect(0, 0, 300, 300);
</script>

<script>
    var container = $("#container");
    setInterval(function () {
        container.load("index.php #weather");
        console.log("refresh")

    }, 1000);
</script> 

不幸的是，红色矩形在重新加载时消失了。 GIF
我的问题是，我应该怎么做才能使其保持/重新出现？
我尝试在加载后将画布代码放到interval函数中，但是矩形出现了几分之一秒才再次消失？
请在您自己的机器上尝试此操作以确认我的问题
有人可以向我解释画布的工作原理，请指导我解决问题

问题是我的图标相同，它们在重新加载后会闪烁一秒钟以消失recordit.co/Ta6u5oVkie

Answer 1

解决了我的问题。 这是一个常见的初学者的错误，我没有在ajax函数的回调中的画布上重绘。

谢谢