1

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

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

如何让 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);
}
4

1 回答 1

6

哇。这变得很奇怪。

这与画布无关。它与您的 BinaryTime 类有关。至少 Chrome 和 Firefox 之间的 Date 对象的功能存在一些差异。

beginningandend是1370318400000和在1370404800000FireFox 中。每次。大概这就是您想要查看评论的内容。

它们在 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 错误。如果你有 Firefox ，它也会beginning = new Date()被“破坏” ，换句话说，它有一个空的构造函数。例如见这里：http: //jsfiddle.net/VbWnk/

碰巧的是，Firefox 中的 new Date(new Date()) 会为您减少毫秒数。实际上，公平地说，IE 的工作方式相同，因此 Chrome/Webkit 是一个奇怪的结果。ECMAScript 规范并不清楚谁是正确的（FF/IE 似乎是正确的，但对于 EcmaScript 6 的讨论表明它们可能是特殊情况new Date(Date)。从技术上讲，Date 对象不是 Date 构造函数可接受的参数，但字符串是，并且日期字符串不包含毫秒，这表明 FireFox/IE 更正确，但 WebKit 的方式也可以理解，将来可能会正确。

...但是无论如何，setHours(a,b,c,d)将小时、分钟、秒、毫秒设置为速记，这样更容易编写。

希望你的项目进展顺利。

于 2013-06-04T04:26:21.837 回答