如何提高帆布动画速度

基本上我有一些代码生成imagedata并将其放在画布中。

但是，当我扩大窗口时，渲染速度会大大减慢。

无论如何是否有优化的方式在全屏中平稳运行？（我知道天真）

优化它的最佳方法是什么？

这是运行的代码：http：//jsfiddle.net/amwnc/3/

这是我的代码：

html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>_#Example</title>
  <meta name="description" content="_#Example">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/main.css?v=1.0">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <script src="js/main.js"></script>
  <div id="containingDiv">
    <canvas class = "board" id = "mainBoard">Your browser version is not supported</canvas>
  </div>
</body>
</html>

CSS：

#containingDiv { 
  overflow: hidden;
}
#mainBoard {
  position: absolute; 
  top: 0px;
  left: 0px;
}

JS：

var canvas, ctx, frame;
function initAll(){
    canvas = document.getElementById('mainBoard');
    buffer = document.createElement('canvas');
    ctx = canvas.getContext('2d');
    frame = ctx.createImageData(ctx.canvas.height,ctx.canvas.width);
};
function resizeCanvas() {
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
};
function draw(){
    frame = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);
    for(var i=0;i<ctx.canvas.height; i++){
        for(var j=0; j<ctx.canvas.width; j++){
          var index  = ((ctx.canvas.width * i) + j) * 4;
          frame.data[index]= 255*Math.random();
          frame.data[index + 1]=255*Math.random();
          frame.data[index + 2]=255*Math.random();
          frame.data[index + 3]=255;
        }
    }
    ctx.putImageData(frame, 0, 0 );
};
window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame || 
           window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 2000);
        };
      })();
function animate() {
    draw();
    requestAnimFrame(function() {
        animate();
    });
};
function viewDidLoad(){
    initAll();
    resizeCanvas();
    animate();
};

window.onload = viewDidLoad;
window.onresize = resizeCanvas;

大多数HTML5画布实现实际上会从使用GPU硬件加速器来用于高级操纵功能（如绘制或抚摸路径）中受益匪浅。不幸的是，对原始图像数据的任何操作均未加速硬件。您用于生成随机像素数据的算法是在CPU上执行的，而不是在GPU上执行的，因此非常慢。

当您想转到大规模的像素级操作并仍然保持表现时，您可能需要看一下WebGL和Pixel阴暗器。这将使您能够在GPU上实现像素级算法，这可以更快地进行几个幅度。

我看到你叫

 frame = ctx.createImageData(ctx.canvas.height,ctx.canvas.width);

在initall（）中2次，然后绘制（）。在调整帆布大小之前，您可以创建Imagedata。而且我在Animate（）您处理的画布中都不知道。

我的建议：您应该在initall（）中删除该呼叫。希望它有帮助

相关内容

最新更新

热门标签：