快速调整大型画布元素

我制作了一个窗口大小的画布元素，并用随机值填充（以便我可以轻松地看到它更新）。当窗口使用<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

快速调整大型画布元素

回答

相关问题