我怎樣才能刷新數據而不會破壞帆布

我有一個基本的天氣應用，使用HTML5的Canvas我怎樣才能刷新數據而不會破壞帆布

一切似乎從作品得到forecast.io數據，並顯示使用相關skycons其繪製圖標和動畫圖標好，但我必須定期更新天氣，而不刷新整個頁面，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
我的問題是，我應該怎麼做才能讓它保持/重現？
我試圖在加載後將畫布代碼放在間隔函數內，但矩形出現幾分之一秒纔會再次消失？
請試試這個你自己的機器，以確認我的問題
有人能解釋我在畫布上的作品，並請指引我一個解決方案

的問題是如何對我的圖標，他們閃爍第二重裝後的相同消失 recordit.co/Ta6u5oVkie

來源

2017-06-23 honeyspoon

你需要從你的index.php容器中得到的數據將不刷新，直到數據加載超時功能運行後這將成爲後重新繪製在畫布上。我不知道jQuery，但肯定有一個你創建的container.load的onload事件。 – Blindman67

你'url'無效，會使'load（）'失敗（並因此清空你的容器）。但無論如何，'index.php'的內容是什麼？它是否也包含JavaScript代碼？爲什麼使用'load（）'（它會寫HTML）而不是一個簡單的'get（）'來只接收新數據，然後更新已經存在的畫布？ – Kaiido

解決了我的問題。這是一個普通的初學者的錯誤，我沒有在ajax函數的回調畫布中重繪。

感謝

來源

2017-06-27 16:20:26 honeyspoon

我怎樣才能刷新數據而不會破壞帆布

回答

相關問題