我是 javascript 的初学者程序员。我不使用jQuery！我想做一个简单的游戏。
我正在使用
将多个图像加载到画布中imageObj.onload = function(){}
我正在为多次按键使用按键监听器，这样图像可以在对角线上移动，同时按下向上和向左键，就像这样：
function keydown_handler(e){my_key[String.fromCharCode(e.keyCode)] = 真的;移动();}
我的问题是，当我按下按键并在画布上移动图像时，图像会闪烁。我想这是因为每次我按键时它都会加载图像。如果这是真的，我怎样才能将图像加载到内存中，然后从内存中调用该图像并更改它的坐标？
谢谢！
【问题讨论】：
好吧，您真正需要做的是使用 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 渲染路径。
【讨论】：
您所指的是处理动画时非常常见的问题。这个问题与内存中存储的内容关系不大，而与每次发生变化时必须重新绘制动画的方式有关。避免这种闪烁问题的最常用方法称为双缓冲。
我从来没有专门使用 HTML5 做过这个，但在快速搜索后，我发现这篇文章可能会对你有所帮助。
【讨论】：