Question

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

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

我成功地解决了这个问题。好像我不明白html画布是如何工作的这是一个更简单的问题

此代码绘制一个红色矩形，并使用jquery加载方法

刷新页面的一部分

<!-- 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
我的问题是，我该怎么办才能让它保持/重新出现？我尝试在加载后将画布代码放在区间函数内，但是矩形会出现一小段时间才会再次消失？
请在您自己的机器上试一试，以确认我的问题有人可以解释一下画布是如何工作的，请指导我一个解决方案

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

Answer 1

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

感谢

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

1 个答案: