1

Canvas を使用して JavaScript と Chrome/Safari で単純なバイナリ クロックを作成しましたが、キャンバスに毎秒何度も描画していても、画面は 1 秒に 1 回だけ更新されます。

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

1 に答える 1

6

わお。これは奇妙になります。

これはキャンバスとは関係ありません。BinaryTime クラスに関係しています。少なくとも Chrome と Firefox では、Date オブジェクトの機能に多少の違いがあります。

beginningとendはFireFoxの1370318400000とです。1370404800000毎回。おそらく、これはコメントを見て欲しいものです。

つまり、コメントが示唆するように、今朝の真夜中と今夜の真夜中を表しているわけではありません。

つまり、Chrome/webkit の Date オブジェクトが壊れているように見えます。しかし、それはより正確です。Firefox ではより微妙な方法で精度が低下しますが、ここでは修正に焦点を当てます。(今夜遅く、アイスクリームの浴槽に泣きながら、いくつかのバグレポートを提出します)。

しかし、あなたは呼び出しておらずsetMilliseconds、クロムはそれを尊重しているので、Chromeはここで正しいことをしています. Firefox はおかしくなり、間違ったことをしますが、たまたまあなたが望んでいることです。

とにかく、すぐに使える簡単な方法は、setHours4 つの引数すべてを使用することです。

// 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 の話は、それらが特殊なケースである可能性があることを示しています。Datenew Date(Date)オブジェクトは技術的には Date コンストラクターの引数として受け入れられませんが、文字列はそうであり、日付文字列にミリ秒が含まれていない. これは、FireFox/IE がより正確であることを示唆していますが、WebKit の方法も理解可能であり、将来的には正しい可能性があります.

...しかし、とにかく、setHours(a,b,c,d)時、分、秒、ミリ秒を省略形として設定するので、書きやすくなります。

あなたのプロジェクトがうまくいくことを願っています。

于 2013-06-04T04:26:21.837 に答える