HTML5 Canvas渲染/緩存問題

Question

所以基本上我在尋找一種在SVG文件中排序元素的方法。 這就是為什么我選擇使用畫布並使它看起來像帶有單元格的網格的原因。 每個元素都有自己的坐標。 到現在為止還挺好。 我創建了一個具有大部分功能的演示程序（我排除了將這些items保存在數據庫中的方法）。

您可以選擇一個元素並將其放入單元格中，然后選擇另一個元素並將其放入同一單元格中，它們將根據其z-index進行排序。 您也可以右鍵單擊該單元格，然后刪除該單元格中的某些/所有項目。

一切都按我想要的方式工作（有一些小故障，但我會加以改善）。 但是，刷新頁面存在問題。

當我將所有元素保存到數據庫中，然后獲取它們並准備在畫布上呈現時。 直到HARD refreshes頁面HARD refreshes時才設置它們（我在Chrome CTRL + R上 ）。

我認為這是一個緩存問題。 有沒有一種方法可以防止緩存頁面或某些解決方法？

由於我的JavaScript有點長，因此我將僅發布jsfiddle： http : //jsfiddle.net/FakeHeal/ozd06eu0/4/

PS ：為了在更新數據庫中的items后刷新頁面，我在$.ajax()成功時使用window.location.reaload() 。

根據要求，我如何存儲我的物品：

DB表具有element_id ， x ， y 。

我使用以下功能准備數據：

var prepare = function (items) {
    var prepared = [];
    for (var i = 0; i < items.length; i++) {
        prepared[i] = {
            id: items[i].id,
            pos: items[i].x + ',' + items[i].y
        };
    }
    return prepared;
};

*此功能是必需的，因為我的后端（ php ）在輸入中有一些限制（ $_POST ， $_GET ， $_COOKIE ）。

我在按鈕上有一個單擊監聽器：

$('#update').on('click', function () {
    $.ajax({
        type: 'POST',
        data: {elements: prepare(items)},
        url: '/update'
    }).done(function (result) {
        location.reload(true);
    }, "json");
});

編輯 ：我的意思是“未正確渲染”是在畫布上缺少某些元素（或至少未顯示），直到我將鼠標懸停在單元格上（這會觸發refreshCell() ）。

Answer 1

您可能需要做的是，在嘗試輸出結果之前，請確保已加載圖像。

您可以使用document.ready ，也可以將繪圖代碼放入OnLoad方法中，該方法在所有內容加載完畢后調用。 我使用document.ready ，它解決了我的問題。 但是我只加載了幾張圖像，卻沒有100張以上的圖像。

Answer 2

問題似乎是您正在繪制尚未加載的圖像。

當你做的時候會發生什么

var img = document.createElement('img');
img.src = [url]

是創建一個空圖像，該圖像將一直為空，直到下載並解析該圖像為止。 在此期間，腳本將繼續執行。 當它嘗試對尚未加載的圖像使用context.drawImage時，它將不會繪制任何內容。

若要解決此問題，請在設置.src屬性之前向創建的所有圖像添加onLoad處理函數，並將對drawImage的任何調用推遲到調用該函數為止。

您如何推遲這些電話？

您可以使用幾種可能的體系結構。

一種是構建一個簡單的預加載器。 將全局變量設置為您擁有的圖像數，減少每個onLoad處理程序中的全局計數器，並在其達到0時初始化您的實際應用程序。

另一個是建立一個像Promise一樣的繪制函數。 如果圖像已經加載，則立即繪制。 但是，如果不是，則將繪圖調用添加到在onLoad處理程序中處理的繪圖操作隊列中。