2012-01-09 5 views
2

私はなぜ、私はHTMLキャンバス上の変換()呼び出しのx成分の大多数を与えるとき、矩形がもはや描くように見えるんを把握しようとしている中で結果を翻訳します適切な座標で以下の例で多数は奇妙な行動

、描かれている2つの長方形がx成分に1だけ異なります。したがって、私はその左端が1ピクセルだけ離れていると予想します。 FirefoxやChromeで見てきたように、それはどういうことでしょう。私もアニメーションバージョンを作っ http://jsfiddle.net/pQst6/

<html> 
<head> 
    <script type="text/javascript"> 
     function go() { 
      var canvas = document.getElementById("canvas"); 
      if(canvas.getContext) { 
       var ctx = canvas.getContext("2d"); 
       ctx.translate(-1000000000, -500); 
       ctx.fillStyle = '#F00' 
       ctx.fillRect(1000000033, 520, 100, 200); 
       ctx.fillStyle = '#00F'; 
       ctx.fillRect(1000000032, 720, 100, 200); 
      } 
     } 
    </script> 
</head> 
<body onload="go();"> 
<canvas id="canvas" width="800" height="600"> 
</canvas> 
</body> 
</html> 

ここで同じ例が見て準備ができています。 http://jsfiddle.net/ry35e/あなたが見ることができるように、図面は通常起動しますが、translateメソッドが増大するXパラメータとして、それは奇妙と奇妙行動を持って進みます。

は、FirefoxとChromeの両方が同じように動作するように見えるので、それは期待される動作ではなく、ブラウザのバグのように思えます。私はそれがある種の精密な問題だと推測しています。あなたは同意しますか同意しますか?それはキャンバスと精度の問題のいくつかの種類がある場合は

、私は私が見つけるか、私自身の変換行列を実装し、キャンバスのコンテキストのまわりでそれをラップする必要があります推測しています。私はそれを作ることは非常に難しくないだろうと確信していますが、誰もそのような変換(ポップ、プッシュなど)を行うjavascriptライブラリを知っていますか?

ありがとうございます!

答えて

2

偏差を使用して、整数2^24(16 777 216)以上でfillRectを呼び出すときに発生します。これはまた、の整数の単精度で表現することができます。作業草案では、倍精度(2^53)のサポートについて述べていますが、明らかにそうではありません(まだ)。 CanvasRenderingContext2D州のMozilla Developer Network(MDN)のドキュメントでは、単精度(浮動小数点数)のみがサポートされています。

+0

これはまた、物事が完全であることを不幸な結果を持っているようです表示されているキャンバスから切り取られていることがあります。たとえば、(10、bigNumber)から(11、greatererNumber)までの行。 – jwelsh