javascript - WebKit 浏览器更新 Canvas 很慢

Question

我在 javascript、Canvas 和 Chrome/Safari 中创建了一个简单的二进制时钟，尽管我每秒在 Canvas 上绘制多次，但它每秒只更新一次屏幕。

FireFox 正在更新我在 Canvas 上绘制的瞬间，我认为我的代码是高效的(事件监视器显示浏览器在动画运行时使用了 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);
}

Answer 1

哇。这变得很奇怪。

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

beginning和end在FireFox中是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();

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

http://jsfiddle.net/wvR6H/

稍微复杂一点的问题是，在 Chrome/WebKit 中，您需要也设置毫秒数:

blah.setMilliseconds(0);

您也需要在 FireFox 中设置它，您正在利用一种 Firefox 错误，因为您现在正在编写代码。如果您有 beginning = new Date()，换言之，它在 Firefox 中也会被“破坏”，换句话说，它有一个空的构造函数。例如，请参见此处:http://jsfiddle.net/VbWnk/

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

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

希望你的项目顺利。