HTML5的JavaScript使用大量的CPU，但不putImageData

我有一些trouble实际上把putImageData图像数据。HTML5的JavaScript使用大量的CPU，但不putImageData

我检查了thegame.pbuf有效的数据，它似乎是有效的。在Opera和Firefox中测试。

任何人有任何想法，为什么它不显示我的颜色？

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <style type="text/css"> 
      #drawingSurface { 
       width:500px; 
       height:500px; 
       border: 5px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id="drawingSurface">2000 and late</canvas> 
     <script type="text/javascript"> 

      var thegame = { 
       init: function (width, height) { 
        var canvas = document.getElementById("drawingSurface"); 
        thegame.ctx = canvas.getContext("2d"); 
        thegame.width = width; 
        thegame.height = height; 
        thegame.pbuf = thegame.ctx.createImageData(width, height); 
       }, 
       drawBanner: function (text) { 
        thegame.ctx.font = "bold 64px Verdana"; 
        thegame.ctx.fillStyle = "#302226"; 
        thegame.ctx.textAlign = "center"; 
        thegame.ctx.fillText(
         text, 
         thegame.width/2, thegame.height * (1/4) 
        ); 
       }, 
       update: function() { 
        for (var j = 0; j < thegame.height; j++) { 
         for (var i = 0; i < thegame.width; i++) { 
          var loc = 4 * (j * thegame.width + i); 
          thegame.pbuf[loc + 0] = Math.random() * 256 | 0; 
          thegame.pbuf[loc + 1] = Math.random() * 256 | 0; 
          thegame.pbuf[loc + 2] = Math.random() * 256 | 0; 
          thegame.pbuf[loc + 3] = Math.random() * 256 | 0; 
          thegame.pbuf[loc + 0] = 255; 
         } 
        } 
       }, 
       draw: function() { 
        thegame.ctx.putImageData(thegame.pbuf, 0, 0); 
        this.drawBanner("Random Colors"); 
       } 
      }; 

      thegame.init(500, 500); 

      //Rendering 
      var interval = 1000/60; 
      (function() { 
       var lastTime = 0; 
       var vendors = ['ms', 'moz', 'webkit', 'o']; 
       for (
        var x = 0; 
        x < vendors.length && !window.requestAnimationFrame; 
        ++x 
       ) { 
        window.requestAnimationFrame = window[vendors[x] 
         + 'RequestAnimationFrame']; 
        window.cancelAnimationFrame = window[vendors[x] 
         + 'CancelAnimationFrame'] || window[vendors[x] 
         + 'CancelRequestAnimationFrame']; 
       } 

       if (!window.requestAnimationFrame) { 
        window.requestAnimationFrame = function (
         callback, 
         element 
        ) { 
         var currTime = new Date().getTime(); 
         var timeToCall = Math.max(
          0, 
          16 - (currTime - lastTime) 
         ); 
         var id = window.setTimeout(function() { 
          callback(currTime + timeToCall); 
         }, timeToCall); 
         lastTime = currTime + timeToCall; 
         return id; 
        }; 
       } 
       if (!window.cancelAnimationFrame) { 
        window.cancelAnimationFrame = function (id) { 
         clearTimeout(id); 
        }; 
       } 
      }()); 

      (function gameloop() { 
       setTimeout(function() { 
        window.requestAnimationFrame(gameloop); 
        thegame.draw(); 
        thegame.update(); 
       }, interval); 
      })(); 

     </script> 
    </body> 
</html>

来源

2013-02-26 Mikhail

貌似这些行：

  thegame.pbuf[loc + 0] = Math.random() * 256 | 0; 
      thegame.pbuf[loc + 1] = Math.random() * 256 | 0; 
      thegame.pbuf[loc + 2] = Math.random() * 256 | 0; 
      thegame.pbuf[loc + 3] = Math.random() * 256 | 0; 
      thegame.pbuf[loc + 0] = 255;

应该是这样的：

  thegame.pbuf.data[loc + 0] = Math.random() * 256 | 0; 
      thegame.pbuf.data[loc + 1] = Math.random() * 256 | 0; 
      thegame.pbuf.data[loc + 2] = Math.random() * 256 | 0; 
      thegame.pbuf.data[loc + 3] = Math.random() * 256 | 0; 
      thegame.pbuf.data[loc + 0] = 255;

来源

2013-02-26 07:43:16 markE

HTML5的JavaScript使用大量的CPU，但不putImageData

回答

相关问题