WebKit浏览器缓慢更新画布

Question

我在javascript中使用Canvas创建了一个简单的二进制时钟,在Chrome/Safari中创建了一个简单的二进制时钟,即使我每秒都要多次绘制到画布,它每秒只更新一次屏幕.

FireFox正在更新我绘制到画布的瞬间,我认为我的代码是高效的(活动监视器说,当动画运行时,浏览器使用单个CPU核心的5%到10%).

如何更频繁地更新webkit浏览器？我的实际代码是在jsfiddle:

http://jsfiddle.net/mqGKR/

但基本上这就是我正在做的事情:

function updateCanvas()
{
  if (!canvasNeedsUpdating()) {
    return;
  }

  var ctx = blockView.getContext("2d");
  ctx.clearRect(0, 0, width, height);

  if (canvasNeedsFill()) {
    ctx.fillStyle = "rgba(255,255,255,1.0)";
    ctx.fillRect(0, 0, width, height);
  }

  window.setTimeout(updateCanvas, 10);
}

Answer 1

哇.这很奇怪.

这与canvas无关.它与你的BinaryTime类有关.至少在Chrome和Firefox之间,Date对象的功能有所不同.

该beginning和end是1370318400000和1370404800000在Firefox.每次.想必这就是你想看的评论.

它们在Chrome中每次都在变化,这意味着它们绝对不会代表今晚的午夜和今晚的午夜,正如您的评论所暗示的那样.

换句话说,Chrome/webkit 中的Date对象显示为已损坏.但它更准确.它在Firefox中的准确性较低,但是现在让我们专注于修复.(今晚晚些时候,在哭泣到一桶冰淇淋的时候,我会提交一些错误报告).

但Chrome在这里做的是正确的,因为你不是在打电话,setMilliseconds而Chrome则尊重这一点.Firefox变得怪异而且做错了,但它恰好是你想要的.

所以无论如何,简单的方法是使用setHours所有四个参数:

// init "beginning" timestamp as midnight this morning
var beginning = new Date();
beginning.setHours(0, 0, 0, 0);
beginning = beginning.getTime();

// init "end" timestamp as as midnight tonight
var end = new Date(date);
end.setHours(0, 0, 0, 0);
end.setDate(end.getDate() + 1);
end = end.getTime();

我现在就这样做.工作范例:

http://jsfiddle.net/wvR6H/

稍微提出的问题是,在Chrome/WebKit中,您还需要设置毫秒:

blah.setMilliseconds(0);

你需要在FireFox中设置它,你正在利用一种Firefox bug,因为你的代码现在正在编写.如果你有,那么它也会在Firefox中"破坏",beginning = new Date()换句话说就是使用空构造函数.请参见此处:http://jsfiddle.net/VbWnk/

事实上,Firefox中的新日期(新日期())会为您缩短毫秒数.实际上,公平地说,IE的工作方式相同,因此Chrome/Webkit是奇怪的.ECMAScript规范不清楚谁是正确的(FF/IE似乎是正确的,但是对于EcmaScript 6的说法表明它们可能是特殊情况new Date(Date).对于Date构造函数,Date对象在技术上不是可接受的参数,但是字符串是,并且日期字符串不包含毫秒.这表明FireFox/IE更正确,但WebKit的方式也是可以理解的,并且可能在未来正确.

...但无论如何,setHours(a,b,c,d)将小时,分钟,秒,毫秒设置为速记,以便更容易编写.

希望你的项目顺利进行.