HTML5 Large canvas

我注意到當動態創建一個大畫布（6400x6400）時，相當多的時候沒有畫任何東西，當將畫布設置爲小尺寸時，它可以在100％的時間內工作，然而，因爲我不知道更好，我沒有別的選擇，只能嘗試讓大帆布正確工作。HTML5 Large canvas

thisObj.oMapCanvas = jQuery(document.createElement('canvas')).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo(thisObj.oMapLayer).get(0);

 // getContext and then drawing stuff here...

畫布的目的是簡單地畫兩個節點（圖像），這是可以左右拖動（視我認爲，人們稱他們）一個div容器內之間的線路。

我認爲可能會發生的事情是，在畫布上調整大小會清空畫布，並且這會干擾上下文繪圖，就像我之前所說的那樣，畫布非常小時它一直工作。

有沒有人經歷過這個和/或知道任何可能的解決方案？

來源

2009-12-26 Steve

這是一個巨大的畫布。每像素6400 x 6400 x 4字節是156 MB，並且您的實現可能需要分配兩個或更多個該大小的緩衝區，以進行雙緩衝，或者需要分配該大小的視頻內存。分配和清除所有內存需要一段時間，並且您可能無法保證在這樣的分配中取得成功。有沒有理由需要這麼大的帆布呢？您可以嘗試調整您的畫布大小，以便在這兩個div之間繪製線條，或者您可以嘗試使用SVG而不是畫布。

另一種可能性是嘗試將畫布分成大塊，並只渲染屏幕上實際可見的塊。谷歌地圖用圖像處理這些信息，只爲當前可見的地圖部分加載圖像（在屏幕的每一側加上一些額外的圖像，以確保在滾動時不需要等待它渲染），保持一種錯覺，即有一個巨大的畫布，而只是渲染比窗戶更大的東西。

來源

2009-12-26 18:14:01

這是一個隨機生成的地圖，尺寸爲100x100，每個單元格爲64x64（想象一個星形圖，其中星星通過星形連接），另一種我試圖用的方法是爲每個鏈接（線）創建一個畫布，需要，我只是認爲它會很慢，因爲更多的插入到DOM中。最初我跟着javascript繪圖庫wz_jsgraphics，但由於渲染線條的性質，滾動非常緩慢。 – Steve 2009-12-26 18:38:58

我也從來沒有意識到這樣做的內存要求，這確實使它不可行。我將不得不考慮使用SVG動態執行此操作，謝謝！ – Steve 2009-12-26 18:49:32

實現HTML5的大多數瀏覽器仍處於早期測試階段 - 所以很可能它們仍然在處理這些錯誤。

但是，您試圖創建的畫布的分辨率非常高......遠高於大多數人的顯示器甚至可以顯示的分辨率。你是否有理由相當這麼大？爲什麼不將可拖動區域限制在更符合典型顯示分辨率的位置？

來源

2009-12-26 16:49:59 LBushkin

它是一個div溢出的內部：hidden，在javascript中你可以容納並拖動該div的內容（基本上設置頂部和左側屬性），以便可以在該視口中查看其部分內容。 – Steve 2009-12-26 17:34:20

我有同樣的問題！我正在使用大畫布來連接一些div。最終我放棄了，並用javascript繪製了一條線（我用小圖像作爲像素繪製了我的線，我首先用div做了它，但在IE中，div出來的太大）。

來源

2012-08-27 17:16:20 Marina

HTML5 Large canvas

回答

相關問題