【发布时间】：2014-01-07 10:39:19
【问题描述】：
这个问题可能跑题了，但我想知道为什么下面的代码会在 macbook pro 2013 视网膜显示器上运行很多求解器，然后是我的旧 hp 笔记本电脑。我在两台设备上都使用 chrome 浏览器。我问这个的原因是因为我使用 html5 和 javaScript 开发了一个游戏，并且游戏在 Mac 上运行了很多求解器
有什么建议吗？
window.onload=function(){
var demo = document.getElementById('demo');
var ctx = demo.getContext('2d');
var animObjects = [];
animObjects.push(new anim(ctx, 0, 90, 80,80, 'yellow', 3, 3));
animObjects.push(new anim(ctx, 20, 90, 80,80, 'red', 4, 0));
loop();
var e = new MouseEvent(ctx);
demo.addEventListener('mousemove', e.clickReporter, false);
function MouseEvent(ctx){
this.clickReporter = function(evt){
var mousePos = getMousePos(demo, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
console.log(message);
writeMessage(demo, message);
}
function getMousePos(demo, evt) {
var rect = demo.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function writeMessage(demo, message) {
ctx.clearRect(0, 0, demo.width, demo.height);
ctx.font = '18pt Italic';
ctx.fillStyle = 'black';
ctx.fillText(message, 10, 25);
}
}
function loop() {
//ctx.clearRect(0, 0, demo.width, demo.height);
for(var i = 0, ao; ao = animObjects[i]; i++) {
ao.update();
}
requestAnimationFrame(loop);
}
function anim(ctx, x, y, XSize,YSize, color, dx, dy) {
var me = this;
this.x = x;
this.y = y;
this.XSize = XSize;
this.XSize = XSize;
this.color = color;
this.dx = dx;
this.dy = dy;
var bool = 0;
this.update = function() {
ctx.clearRect(me.x, me.y, me.XSize, me.XSize);
if (me.x < 0 || me.x > ctx.canvas.width-80){
me.dx = -me.dx;
}
if (me.y < 0 || me.y > ctx.canvas.height-80){
me.dy = -me.dy;
}
me.x += me.dx;
me.y += me.dy;
render();
}
function render() {
ctx.beginPath();
ctx.rect(me.x, me.y, me.XSize, me.XSize);
ctx.closePath();
ctx.fillStyle = me.color;
ctx.fill();
}
return this;
}
}
【问题讨论】：
-
很简单。较慢的计算机/浏览器，较慢的动画。反之亦然。
-
@Dude 我不会说它的求解器然后是我 5 岁的 hp
-
computer_/browser_ Mac 版 Chrome 中可能存在一些硬件优化问题。我不知道。
标签： javascript html macos canvas