![](/img/trans.png)
[英]Does JavaScript have a language construct similar to the php list command?
[英]Does javascript have a blit or memcpy command?
我已经构建了自己的flip
命令,并且它很慢并且需要永远。 我想知道javascript是否有blit
或memcpy
样式命令。 现在,我正在逐个项目地使用for循环进行复制,它需要“永远”。
以下是我的翻转功能的示例用法。 我正在运行3层,如果全高,则只有1层,有3个简单的动画,fps以35 FPS的速度突出。 理想情况下,在远远高于FPS的情况下,应该有3个位置,在我预期的200+范围内。
v:36.8 l0:36.8 l1:57.8 l2:36.8图层的FPS是对其缓冲区的渲染,v是使用flip
函数渲染到画布。 (这些FPS来自Mac上的Chrome)
v = the screen update, the main flip function listed below.
l0 = The bottom fire, its a full height layer
l2 = The static noise, its a 1/2 height layer
l3 = The top fire, its a 1/4 height layet
想象一下,有9层或10层,FPS会像石头一样掉落。 在FF版本12中,它已经无法使用......甚至没有两位数的FPS费率。 歌剧至少是双倍的。
v:4.2 l0:4.2 l1:4.2 l2:4.2 (FF 12 OSX)
v:15.5 l0:15.5 l1:15.5 l2:15.5 (Opera latest OSX)
我的翻转功能
flip : function() {
var fps = '';
// Combine the layers onto the back buffer
for (var l = 0; l < this.layers.length; l++)
{
fps += 'l' + l + ':' + this.layers[l].fps.toFixed(1) + ' ';
var layerWidth = this.layers[l].options.width;
var layerHeight = this.layers[l].options.height;
for (var x = 0; x < layerWidth; x++)
{
for (var y = 0; y < layerHeight; y++)
{
var index = (y*this.layers[l].options.width + x)*4;
var r = this.layers[l].buffer[index+0];
var g = this.layers[l].buffer[index+1];
var b = this.layers[l].buffer[index+2];
var a = this.layers[l].buffer[index+3];
if (r|g|b|a != 0) {
this.buffer.data[index+0] = r;
this.buffer.data[index+1] = g;
this.buffer.data[index+2] = b;
this.buffer.data[index+3] = a;
}
}
}
}
fps = 'v:' + this.fps.toFixed(1) + ' ' + fps;
this.$fps.html(fps);
// blit the buffer
this.context.putImageData(this.buffer, 0, 0);
// Calculate fps
var now = new Date;
var thisFrameFPS = 1000 / (now - this.last);
this.fps += (thisFrameFPS - this.fps) / 50;
this.last = now;
var t = this;
setTimeout(function() {t.flip.apply(t);}, this.speed);
}
您的代码可以改进,但我怀疑加速是否会很重要。
这是我想出来的,请注意它未经测试。 我假设处理图层的顺序并不重要,如果它是用您的版本替换第一个for循环。
function flip () {
var fps = '';
// Combine the layers onto the back buffer
for (var l = this.layers.length; l--;) {
fps += 'l' + l + ':' + this.layers[l].fps.toFixed (1) + ' ';
var layerWidth = this.layers[l].options.width;
var layerHeight = this.layers[l].options.height;
for (var index = 0, x = layerWidth; x--;) {
for (var y = layerHeight; y--; index += 4) {
var r = this.layers[l].buffer[index+0];
var g = this.layers[l].buffer[index+1];
var b = this.layers[l].buffer[index+2];
var a = this.layers[l].buffer[index+3];
if (r|g|b|a != 0) {
this.buffer.data[index+0] = r;
this.buffer.data[index+1] = g;
this.buffer.data[index+2] = b;
this.buffer.data[index+3] = a;
}
}
}
}
};
假设r,g,b和a都是8位量化,您可以考虑将它们打包成单个int。 这将减少内循环中的处理。 更高效的是使用新的arrayBuffer工具
有一个memcpy.js使用Typed Array .prototype .subarray()(如果可用)。
浏览器支持很好 ,甚至IE10都有subarray
。
function memcpy (src, srcOffset, dst, dstOffset, length) {
var i
src = src.subarray || src.slice ? src : src.buffer
dst = dst.subarray || dst.slice ? dst : dst.buffer
src = srcOffset ? src.subarray ?
src.subarray(srcOffset, length && srcOffset + length) :
src.slice(srcOffset, length && srcOffset + length) : src
if (dst.set) {
dst.set(src, dstOffset)
} else {
for (i=0; i<src.length; i++) {
dst[i + dstOffset] = src[i]
}
}
return dst
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.