1

Google Chrome でのみページがリロードされるまで、HTML5 キャンバスを描画できません。Firefox では正常に動作します。

ここにフィドルがあります：http://jsfiddle.net/c5mGL/

<canvas id="myCanvas" width="1202" height="602" style="border:1px solid #d3d3d3;"></canvas>

(function () {
'use strict';

window.onload = function () {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  function reset() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(100, 150);
    ctx.lineTo(450, 50);
    ctx.stroke();
  }

  reset();
};
})();

HTML Web ページは iframe に埋め込まれているため、フィドルでの表示中はすべて正常に動作します。しかし、生成された Web ページhttp://jsfiddle.net/c5mGL/5/show/を直接見ると、問題が発生します。

再現手順: Google Chrome を開き、新しいタブを開き、http://jsfiddle.net/c5mGL/5/show/に移動し、Enter キーを押しても何も表示されません (JavaScript コンソールにもエラーはありません)。タブを更新すると、キャンバスに線が表示されます。

小さいキャンバス (300 * 200) を使用するとうまく機能するため、HTML5 キャンバスのサイズが原因のようです。

誰かアイデア？

どうもありがとう。

編集: Google Chrome バージョン: バージョン 28.0.1500.72 m

4

1 に答える 1

1

コメントによると：

ドライバーの問題かもしれません。Canvas ハードウェア アクセラレーション、chrome://flags/ を無効にして、チャンネルを Dev チャンネルに切り替えて、問題が既に修正されているかどうかを確認してください。

于 2013-07-30T09:20:46.950 に答える