在網頁上設計最快的方法

-1

我需要在一個網頁上動態地繪製4000個矩形，我嘗試了divs,SVG和canvas，但最大的問題是調整頁面大小，因爲我必須重新繪製頁面，最多需要5秒。在網頁上設計最快的方法

哪個是在一個網頁上設計矩形的最快方法？

編輯：

我有兩個表這樣一個

base state

當「圖像」被設計頁面的滾動是相當不錯的，但問題是，當我必須調整Wole頁面以適應窗口大小。

實時我必須改變圖片的一些數據的基礎recived一個這是結果的一個例子

end state

你可以看到，每一個矩形的內部圖像是不相同的，所以我不僅可以改變顏色。

現在我有75列和61列，使4575個細胞

來源

2014-04-07 TheGr8_Nik

我試圖用js繪製大約2000個DIV，而且速度很慢。你可以做的是創建一個畫布並在其上繪製矩形 - 我想這是最快和最簡單的方法。但除此之外，知道你想要做什麼，以及爲什麼，這將是有用的。你也可以添加一些代碼！ – Aloso

也許使用CSS漸變背景圖案？取決於複雜性。 – NaNpx

問題已解決，canvas！

我做了一個JSON變量來存儲所有矩形的值，並在每次調整大小事件時重繪頁面。

之後可能會嘗試我發現，而不是使用

context.rect(posX, posY, width, height); 
context.fill();

我應該使用

context.fillRect(posX, posY, width, height);

這是更快，我可以呈現在互聯網大約100毫秒的矩形的沃勒量探險家，我認爲這是相當驚人的。

來源

2014-04-08 15:47:58

需要的jQuery

我寫了一個簡短的小提琴，這似乎相當resopnsive我。

$(document).ready(function() { 
    var markup = new Array(); 
    for (var i = 0; i < 4000; i++) { 
     markup.push("<span />"); 
    } 
    $('#container').append(markup.join("")); 

});

An example of creating 4000 divs as rectangles

的問題是，什麼是你到底想幹什麼？你能提供有問題的例子嗎？

來源

2014-04-07 16:42:33

請注意，該問題沒有Jquery標籤，也沒有任何問題暗示其用途。也許你應該指出你的答案需要Jquery。 – jing3142

是的，你可以繪製所有的矩形沒有問題，但問題是你必須調整大小，因爲窗口調整大小。 –

在網頁上設計最快的方法

回答

相關問題