【发布时间】：2012-03-22 02:08:41
【问题描述】：
我正在考虑使用 javascript 作为游戏逻辑和 HTML5 画布元素来制作游戏动画。我的目标是编写一些适用于浏览器和更新的智能手机的东西。所以我编写了一个快速程序，在屏幕上移动 100 圈并显示帧速率。我对结果相当失望： 铬：〜90 FPS 火狐：~ 25 FPS iPhone：~11 FPS
这是一个非常简单的测试，所以我不喜欢真正制作完整游戏的机会。这是画布元素的标准结果还是有一些技巧可以加快绘图速度，如果您有任何好的链接，请告诉我？画布在这一点上只是一个玩具还是可以用于现实世界的应用程序。
编辑代码如下：
var ctx;
var width;
var height;
var delta;
var lastTime;
var frames;
var totalTime;
var updateTime;
var updateFrames;
var creats = new Array();
function init() {
var canvas =document.getElementById('main');
width = canvas.width;
height = canvas.height;
ctx = canvas.getContext('2d');
for(var i=0; i < 100; ++i) {
addCreature();
}
lastTime = (new Date()).getTime();
frames = 0;
totalTime = 0;
updateTime = 0;
updateFrames =0;
setInterval(update, 10);
}
function addCreature() {
var c = new Creature(Math.random()*100,Math.random()*200);
creats.push(c);
}
function update() {
var now = (new Date()).getTime();
delta = now-lastTime;
lastTime = now;
totalTime+=delta;
frames++;
updateTime+=delta;
updateFrames++;
if(updateTime > 1000) {
document.getElementById('fps').innerHTML = "FPS AVG: " + (1000*frames/totalTime) + " CUR: " + (1000*updateFrames/updateTime);
updateTime = 0;
updateFrames =0;
}
for(var i=0; i < creats.length; ++i) {
creats[i].move();
}
draw();
}
function draw() {
ctx.clearRect(0,0,width,height);
creats.forEach(drawCreat);
}
function drawCreat(c,i,a) {
if (!onScreen(c)) {
return;
}
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(c.x, c.y, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function onScreen(o) {
return o.x >= 0 && o.y >= 0 && o.x <= width && o.y <=height;
}
function Creature(x1,y) {
this.x = x1;
this.y = y;
this.dx = Math.random()*2;
this.dy = Math.random()*2;
this.move = function() {
this.x+=this.dx;
this.y+=this.dy;
if(this.x < 0 || this.x > width) {
this.dx*=-1;
}
if(this.y < 0 || this.y > height) {
this.dy*=-1;
}
}
}
init();
【问题讨论】：
-
你能把代码贴出来吗？
-
我读到断开操作与 DOM 的连接会使事情真的快得多，我认为他们制作了一个画布元素而不将其连接到 DOM 树中的任何位置并对其进行 blitted画完的时候就结束了。但我不能 100% 确定 - 我只是快速浏览了这篇文章，然后决定这不是我目前正在搜索的内容。
-
我和你有同样的问题（和同样的目的，构建基于 HTML Canvas 的游戏以将它们部署在 iOS 和 Android 平板电脑和手机上）查看我的测试（A Sky and Clouds，基本上是一堆圆圈在移动）gubatron.com/html5/sky.html 我在桌面上获得了很棒的 FPS，但我在 Galaxy Tab 上能获得的最好的是 10-12FPS。尝试了很多东西，唯一有帮助的是减少绘制的圆圈数量。这让我想到，也许我应该在画布的一小部分上工作，分辨率要低得多，然后将其放大，这样会飞吗？
-
我放弃了为手机制作基于画布的游戏并重新开始制作应用程序。以较低的分辨率绘图会提高速度，但会降低质量。我认为任何需要每帧都重新绘制的东西在移动设备上是行不通的。
标签： javascript html canvas