3

キャンバスと Chrome 27.0 で奇妙な問題が発生しました。

キャンバスに大量の描画を行った後、arc 関数を使用すると、OS X の Chrome で塗りつぶされた四角形が描画されますが、同じ OS X マシンの Safari、Firefox では問題なく動作し、Windows の IE10、Chrome、および Firefox では常に問題ありません.

問題は、事前に大量のコードを実行しないと再現できないため、事前に行われていることと関係があると思いますが、ここにいくつかの情報があります。おそらく誰かが私が考えていなかった方向に私を向けることができますまだ。

これは失敗するコードです:

    ctx.beginPath();
    ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
    ctx.arc(cx*sfx, cy*sfy, width*sfy, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.stroke();

2piではなく1.9999piで弧を描くことで、Chromeで円を描くことができます。このコードは機能します：

    ctx.beginPath();
    ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
    ctx.arc(cx*sfx, cy*sfy, width*sfy, 0, Math.PI * 1.999, false);
    ctx.closePath();
    ctx.stroke();

また、 beginPath() ステートメントを削除することもできます。ただし、キャンバス上の最後のオブジェクトが描画された場所から円の始点まで線が描画されます。

順序を変更し、begin/end パス ステートメントを 2 重にして削除しようとしましたが、説明したこと以外はまったく効果がありませんでした。

手がかりはありますか？

乾杯

  • バルト
4

1 に答える 1

0

同じ問題があり、最初は同じハックを使用しましたが、後で moveTo を追加しました

  ctx.moveTo(x + radius, y);
  ctx.arc(x, y, radius, 0, Math.PI*2, true);

  /*
  Chrome suddenly started drawing a filled square (2013 May 26)
  can't get the filled square though in jsfiddle

  first try was changing it to
  ctx.arc(x, y, radius, 0, Math.PI*1.999, false)
  which worked, but then added the moveTo, which also made it work again
  */
于 2013-11-13T18:07:23.303 に答える