Image HTML5图像缓冲区_Image_Html_Buffer_Onload

Image HTML5图像缓冲区

image html

Image HTML5图像缓冲区,image,html,buffer,onload,Image,Html,Buffer,Onload,我是一名javascript初学者。我不使用jQuery！我想做一个简单的游戏我正在使用 imageObj.onload=function（）{} 我使用keylistener进行多个按键，这样图像可以在按下向上键和向左键的同时沿对角线移动，使用smth如下所示：函数keydown_处理程序（e）{my_key[String.fromCharCode（e.keyCode）]= true；Move（）；} 我的问题是，当我按下键并移动画布上的图像时，图像会闪烁。我想这是因为每次我按一个键时它都

我是一名javascript初学者。我不使用jQuery！我想做一个简单的游戏

我正在使用

imageObj.onload=function（）{}

我使用keylistener进行多个按键，这样图像可以在按下向上键和向左键的同时沿对角线移动，使用smth如下所示：

函数keydown_处理程序（e）{my_key[String.fromCharCode（e.keyCode）]= true；Move（）；}

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

谢谢大家!

在处理动画时，您所指的是一个非常常见的问题。这个问题与存储在内存中的内容关系不大，而与每次更改动画时必须重新绘制的方式关系更大。避免这种闪烁问题的最常用方法称为双缓冲

我从来没有专门使用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>


var canvas=document.getElementById（'gameCanvas'）；
var context=canvas.getContext（'2d'）；
var myImage=新图像（）；
var myImage.onload=function（）{init（）；}；
var myImage.src='location/of/image.png'；
var imageX=0，imageY=0；
函数render（）
{
window.requestAnimationFrame（渲染）；
//透明帆布
canvas.width=canvas.width；
drawImage（myImage、imageX、imageY）；
imageX++；
imageY++；
}
函数init（）
{
window.requestAnimationFrame（渲染）；
}

当您通过画布进行渲染时，将永远不会出现闪烁，因为浏览器已经在双缓冲该渲染表面；手动双缓冲画布实际上会显著降低帧率。您可能会遇到（如果您是通过画布进行渲染）帧撕裂的情况。使用requestAnimationFrame将通过基本上v同步渲染来解决撕裂问题（因为渲染要等到代码执行结束）

希望这将帮助您开始使用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>


var canvas=document.getElementById（'gameCanvas'）；
var context=canvas.getContext（'2d'）；
var myImage=新图像（）；
var myImage.onload=function（）{init（）；}；
var myImage.src='location/of/image.png'；
var imageX=0，imageY=0；
函数render（）
{
window.requestAnimationFrame（渲染）；
//透明帆布
canvas.width=canvas.width；
drawImage（myImage、imageX、imageY）；
imageX++；
imageY++；
}
函数init（）
{
window.requestAnimationFrame（渲染）；
}

希望这将帮助您开始使用HTML5进行渲染的正确路径。

请包含一段用于移动图像的工作代码。在看到您使用的实际代码之前，我们无法进行真正的评论。请包含您用于移动图像的工作代码块。在看到您实际使用的代码之前，我们无法进行评论。非常感谢！我不完全理解你推荐的帖子中所解释的内容，但根据你的建议，我搜索了双缓冲教程，发现它特别有用：非常感谢！我不完全理解您推荐的帖子中所解释的内容，但根据您的建议，我搜索了双缓冲教程，发现它特别有用：