html5 缓冲,HTML5图像缓冲区(HTML5 Image Buffer)

HTML5图像缓冲区(HTML5 Image Buffer)

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

我正在使用多个图像加载到画布

imageObj.onload = function(){}

我为多个按键使用了一个keylistener，这样图像就可以在对角线上移动，同时按下向上和向左按键，如下所示：

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

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

谢谢！

I am a beginner programmer in javascript. I don't use jQuery! And I want to make a simple game.

I am loading multiple images into canvas using

imageObj.onload = function(){}

I am using a keylistener for multiple keypresses so that the images could move on the diagonal while pressing both up and left keys by using smth like this:

function keydown_handler(e){my_key[String.fromCharCode(e.keyCode)] = true; Move();}

My problem is that when I press the keys and move the images on the canvas the image flickers. I suppose this is because it loads the image every time I press a key. If this is true how can I load an image ONCE into memory and then RECALL that image from memory and change it's coordinates?

Thank you!

原文：https://stackoverflow.com/questions/8621494

更新时间：2019-12-21 00:34

最满意答案

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

我从来没有专门使用过HTML5，但经过快速搜索，我发现这篇文章可以帮助你。

What you are referring to is a very common problem when dealing with animations. The issue has less to do with what is stored in memory and more to do with the way an animation must be redrawn each time something changes. The most common method for avoiding this flickering issue is known as double buffering.

I have never done this using HTML5 specifically but after a quick search I found this article that may help you.

相关问答

有一个标准的Python函数imghdr.what 。 它统治！ ^ __ ^ There is a standard Python functionimghdr.what. It rulez! ^__^

根据您的输出，它是一个PNG文件。 只需将其保存到wb模式的文件中即可。 由于您是PHP开发人员，我只会使用您在python中拥有的内容： 方案一： 保存到文件并使用PHP进行提取 ...

output = image

f=open ("someFileName.png", wb)

f.write(output[1])

f.close()

然后在PHP包装器中使用"someFileName.png" 。 选项二：从PHP包装器调用python脚本。 将图像数据作为退出代码传递给包装器。 ...

...

你错了。 图像是二进制数据，也不是字符串数据。 所以有两个错误： 1)您无法使用EOF常量检查文件结尾。 因为EOF通常定义为0xFF，并且它是二进制文件中的有效字节。 因此，使用feof()函数来检查文件的结尾。 或者你也可以用最大可能的方式检查文件中的当前位置(你之前用ftell()得到它)。 2)由于文件是二进制文件，因此中间可能包含\0 。 因此，您无法使用字符串函数来处理此类数据。 我也看到你使用的是C ++语言。 请告诉我为什么你使用经典的C语法进行文件工作？ 我认为使用C ++功能，

...

正如评论中所述。 使用VK_REMAINING_ARRAY_LAYERS对于layerCount的VkImageSubresourceRange无效，因此您必须将layerCount显式设置为要复制的实际层数。 As noted in the comments. Using VK_REMAINING_ARRAY_LAYERS is invalid for the layerCount of VkImageSubresourceRange, so you have to explicitly set

...

处理动画时，你指的是一个非常普遍的问题。 这个问题与存储在内存中的内容较少有关，更重要的是每次改变动画时必须重新绘制动画的方式。 避免这种闪烁问题的最常用方法称为双缓冲。 我从来没有专门使用过HTML5，但经过快速搜索，我发现这篇文章可以帮助你。 https://stackoverflow.com/a/2864533/594558 What you are referring to is a very common problem when dealing with animations. The

...

关于是否可以这样做，评论中有很多讨论，所以我将在这里提供一个特定于媒体源的答案。 Media Source Extensions (MSE)是一种新的(尚未广泛支持的)工具集，可帮助您控制HTML5视频的缓冲和流式传输。 从W3C摘要： 此规范扩展了HTMLMediaElement以允许JavaScript生成用于回放的媒体流。 允许JavaScript生成流有助于各种用例，如自适应流和时移实时流。 我将特别推荐您使用SourceBuffer对象 ，该对象包含有关如何处理音频和视频轨道缓冲的信息。

...

问题解决了： 在上面代码的末尾，执行以下操作： import base64

img_tag = ""

Problem solved: towards the end of the code above, do this: import base64

img_tag = "

sendJpegImage(blob.data(), blob.length())

使用void sendJpegImage(void* data, size_t length)作为您的数据发送功能。 Thanks a

...

修复。 升级到最新的NVidia驱动程序，一切似乎都很好。 Fixed it. Upgraded to latest NVidia drivers and everything seems fine.

下面是带有示例调用的代码，它可以在位置(33,41)处检索像素值。 #include

// Returns the char position and bit of pixel x, y.

void calc_pos(int x, int y, int width, int *char_no, int *bit_no) {

*char_no = (x + y * width) / CHAR_BIT;

*bit_no = (x + y * width) % CHAR

...