Question

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

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

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

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

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对象的功能存在一些差异。

FireFox中的beginning和end为1370318400000和1370404800000。每次。大概这就是你想看的评论。

他们每次都在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();：

blah.setMilliseconds(0);

我现在就这样做。工作示例：

http://jsfiddle.net/wvR6H/

稍微提出的问题是，在Chrome / WebKit中，您需要也设置毫秒：

beginning = new Date()

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

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

...但无论如何，{{1}}将小时，分钟，秒，毫秒设置为速记，以便更容易编写。

希望你的项目顺利进行。

WebKit浏览器缓慢更新画布

1 个答案: