我應該在一個畫布中使用多個圖像嗎？

什麼是最佳實踐？我應該爲html5中的每個圖像製作一個單獨的畫布標籤，還是將多個圖像放入一個畫布中，以及如何才能做到這一點。我應該在一個畫布中使用多個圖像嗎？

到目前爲止我的代碼：

var canvas = document.getElementById("e"); 
var context = canvas.getContext("2d"); 

var cat = new Image(); 
cat.src = "images/cartoonPaul01.jpg"; 
cat.onload = function() { 
    context.drawImage(cat, 0, 0, 169, 207); 
};

來源

2011-08-14 Cool Guy Yo

你可以動態地做到這一點，如果你這麼傾向。來自異常藝術的muro使用一些基礎畫布 - 溫度，緩衝區和背景。然後使用側面的控件動態創建和刪除圖層。這很大程度上取決於你想要做什麼。

如果您只是打印到畫布上，並且不需要必須以需要動態的方式更改圖像，則可以將它們全部繪製到一個畫布上。如果您需要分層，請使用它。

動態帆布和上下文創建：

// This is not best practice, just an example using globals. 
var layers = []; 
var lyrCtx = []; 

createLayer = function() { 
    // Create the canvas. 
    layers.push(document.createElement('canvas')); 
    layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1); 

    // Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i] 
    lyrCtx.push(layers[layers.length - 1].getContext("2d")); 

    // Handle context settings here. 
}

來源

2011-08-17 18:12:21 stslavik

你應該得到平衡。我通常在我的應用程序中使用4-6個畫布層，並在其上繪製邏輯部分。

來源

2011-08-15 14:35:38 Shock

我應該在一個畫布中使用多個圖像嗎？

回答

相關問題