快速調整大型畫布元素

我製作了一個窗口大小的畫布元素，並用隨機值填充（以便我可以輕鬆地看到它更新）。當窗口使用<body onresize="updateCanvas();">時它會調整大小，並且速度很慢。這就是它將會如何，還是有更好的方法來做到這一點？快速調整大型畫布元素

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Window Sized Canvas</title> 
    <!-- <link href="style.css" rel="stylesheet" type="text/css"/> 
    Relevant style below: --> 
    <style type="text/css"> 
     body {margin:0; padding:0;} 
     canvas {display:block;} 
    </style> 
</head> 
<body onresize="updateCanvas();"> 
    <canvas id="hCanvas">Your browser does not support the canvas tag</canvas> 
    <script type="text/javascript"> 
     var jCanvas = document.getElementById("hCanvas"); 
     var jc2D = jCanvas.getContext("2d"); 

     updateCanvas(); 
     function updateCanvas() { 
      jCanvas.width = window.innerWidth; 
      jCanvas.height = window.innerHeight;    
      var jcW = jCanvas.width; 
      var jcH = jCanvas.height; 
      var jcWH4 = (jcW*jcH)<<2; 
      var jcImageData = jc2D.createImageData(jcW, jcH); 
      for (i = 0; i < jcWH4; i += 4) { 
       jcImageData.data[i] = (Math.random()*255)|0; 
       jcImageData.data[i+1] = (Math.random()*255)|0; 
       jcImageData.data[i+2] = (Math.random()*255)|0; 
       jcImageData.data[i+3] = 255; 
      } 
      jc2D.putImageData(jcImageData, 0, 0); 
     } 
    </script> 
</body> 
</html>

編輯：我發現一些不錯的代碼限制onresize()。我只是發佈不同於上面的內容：

... 
<body onresize="resizeTimer();"> 
... 
var resizeDelay; 
function resizeTimer() { 
    clearTimeout(resizeDelay); 
    resizeDelay = setTimeout("updateCanvas()", 200); 
} 
...

來源

2013-03-01 asimes

這種方法比你現在的方法更快！

而是重新創建隨機圖案中的每個調整大小的：

在啓動時，保存在一個隱藏的畫布（緩衝）一旦您的隨機模式。

然後onresize可以將該緩衝區繪製到您調整大小的窗口上。

下面是代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Window Sized Canvas</title>  <style type="text/css"> body {margin:0; padding:0;} canvas {display:block;} </style> </head> <body onresize="updateCanvas();"> <canvas id="canvas">Your browser does not support the canvas tag</canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var jCanvas; BufferCanvas(); updateCanvas(); function updateCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.drawImage(jCanvas,0,0,jCanvas.width,jCanvas.height,0,0,canvas.width,canvas.height); } function BufferCanvas() { jCanvas = document.createElement("canvas"); var jc2D = jCanvas.getContext("2d"); jCanvas.width = window.innerWidth; jCanvas.height = window.innerHeight; var jcW = 1920; // or your max window size var jcH = 1080; var jcWH4 = (jcW*jcH)<<2; var jcImageData = jc2D.createImageData(jcW, jcH); for (i = 0; i < jcWH4; i += 4) { jcImageData.data[i] = (Math.random()*255)|0; jcImageData.data[i+1] = (Math.random()*255)|0; jcImageData.data[i+2] = (Math.random()*255)|0; jcImageData.data[i+3] = 255; } jc2D.putImageData(jcImageData, 0, 0); } </script> </body> </html>

來源

2013-03-01 23:32:15 markE

謝謝，這將對我想要做的一些事情有效。其他人應該與窗口成比例，所以我想我會用交替像素線的通過來填充這些線（直到所有像素線被填充）。 – asimes 2013-03-02 00:07:32

用精確確定的像素值重新繪製畫布會很慢，幾乎無論如何。一個體面的大小的屏幕有很多像素，需要時間盯着每一個像素，並決定如何用JavaScript繪製它。

可能最簡單的事情就是使用CSS來上下縮放畫布。這是非常快的，因爲它依賴於計算機上強大的內置圖像縮放功能。每次都不會重新計算，但只要這不重要，它會非常快速。 Here's an implementation of this。畫布上的屬性「高度」和「寬度」以像素爲單位影響渲染區域的大小，而「高度」和「寬度」屬性會影響畫布所佔的區域，而不會修改所擁有像素的數量畫畫。詳細說明：如果您在不重繪任何內容的情況下增加畫布的基於屬性的大小，您會注意到前一張圖片將保持不變;發生的一切就是你在畫布上添加了一些空白區域。但是，如果你只是改變風格，那麼畫布的尺寸就會變成你所說的尺寸，但即使畫布上的所有內容在理論上都能達到這種尺寸的高分辨率，它也可能看起來有些粗糙。

這確實在您操作的圖像中創建了一些奇怪的工件，但這並不是簡單的方法。你可以做的一件事是，當畫布的大小發生變化時，默認使用CSS，但是在調整大小後，用一個新的，更高的res模式重繪。如果你決定走這條路，需要任何幫助，請告訴我。

來源

2013-03-01 22:53:12 Bubbles

謝謝你的建議，但如果是這樣的話，我寧願有些緩慢。即使這意味着在填充像素時進行一些通過（填充交替行直到全部填滿）。 – asimes 2013-03-02 00:04:06

快速調整大型畫布元素

回答

相關問題