HTML5图像缓冲区

我是一名JavaScript初学者程序员。我不使用jQuery！我想做一个简单的游戏。HTML5图像缓冲区

我使用

imageObj.onload加载多个图像转换成画布=函数（）{}

我使用多个按键一个的KeyListener使得图像可以在同时按下向上和向左按键的同时按对角线移动，如下所示：

函数keydown_handler（e）{my_key [String.fromCharCode（e.keyCode）] = true;移动（）;}

我的问题是，当我按下键并移动画布上的图像时，图像闪烁。我想这是因为它每次按下按键都会加载图像。如果这是真的，我如何将图像加载到内存中，然后从内存中调用该图像并更改它的坐标？

谢谢！

来源

2011-12-23 Vlad Otrocol

请包括您正在用于移动图像的一段代码。在我们看到您使用的是什么实际代码之前，我们无法评论。 – jfriend00

对于没有jQuery的+1。 – John

当涉及动画时，你指的是一个非常普遍的问题。这个问题与存储在内存中的内容较少有关，更重要的是每次改变动画时必须重新绘制动画的方式。避免这种闪烁问题的最常用方法称为双缓冲。

我从来没有做过使用HTML5的具体内容，但经过快速搜索，我发现这篇文章可能会对您有所帮助。

https://stackoverflow.com/a/2864533/594558

来源

2011-12-23 23:40:43

非常感谢！我并不完全理解你推荐的文章中解释的内容，但是对于我建议的双缓冲教程进行了深入研究，并发现这是非常有用的：http://www.felinesoft.com/blog/index.php/ 2010/09 /加速游戏编程与 - HTML5和帆布/ –

那么，你真正需要做的是创建一个使用requestAnimationFrame（）的JavaScript渲染循环，并与canvas元素呈现。下面是用HTML5渲染的一个非常基本的例子：

<!DOCTYPE html> 
<html> 
    <body> 
     <canvas id="gameCanvas" width="800px" height="600px"></canvas> 
     <script type="text/javascript"> 
      var canvas = document.getElementById('gameCanvas'); 
      var context = canvas.getContext('2d'); 
      var myImage = new Image(); 
      var myImage.onload=function(){init();}; 
      var myImage.src='location/of/image.png'; 
      var imageX = 0, imageY = 0; 

      function render() 
      { 
       window.requestAnimationFrame(render); 

       // clear canvas 
       canvas.width = canvas.width; 

       context.drawImage(myImage, imageX, imageY); 

       imageX++; 
       imageY++; 
      } 

      function init() 
      { 
       window.requestAnimationFrame(render); 
      } 
     </script> 
    </body> 
</html>

永远不会有闪烁，当你通过渲染一张画布，因为浏览器已经是双缓冲使渲染表面;并手动双缓冲画布实际上会导致帧率明显下降。您可能遇到的情况（如果您通过画布进行渲染）正在撕裂框架。使用requestAnimationFrame将通过本质上同步渲染来解决撕裂问题（因为它一直等到代码执行结束时才渲染）。

希望这会帮助您开始使用HTML5呈现的正确路径。

来源

2011-12-24 00:18:44 ceprovence

HTML5图像缓冲区

回答

相关问题