在HTML畫布中的大數翻譯結果奇怪的行爲

我想弄清楚爲什麼，當我給一個大的數字到一個HTML畫布上的translate（）調用的x組件，矩形不再似乎繪製在適當的座標處。在HTML畫布中的大數翻譯結果奇怪的行爲

在下面的示例中，繪製的兩個矩形在x分量中僅相差1。因此，我希望他們的左邊只有一個像素。正如你可以在Firefox和Chrome中看到的那樣，這不會發生。

<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/pQst6/

我還做了一個動畫版。正如你所看到的，繪圖開始正常，但隨着translate方法的x參數增加，它會進入weirder和weirder行爲。

Firefox和Chrome都表現出相同的行爲，所以它看起來像預期的行爲，而不是瀏覽器的錯誤。我猜測這是某種精確度問題。你同意/不同意嗎？

如果它是一種與畫布有關的精度問題，我猜我必須找到或實現我自己的變換矩陣並將其包裝在畫布上下文中。我相信這不會很難做到，但有誰知道一個JavaScript庫可以做這樣的轉換（使用pop，push等）？

謝謝！

來源

2012-01-09 Shannon

當您使用整數2^24（16 777 216）或更大的整數調用fillRect時，會出現偏差。這也恰好是最大的整數您可以用單精度表示。工作草案支持雙精度（2^53），但顯然情況並非如此（尚未）。 CanvasRenderingContext2D的Mozilla開發者網絡（MDN）文檔僅支持單精度（浮點）。

單精度：http://en.wikipedia.org/wiki/Single-precision
雙精度：http://en.wikipedia.org/wiki/Double-precision
工作草案：http://www.w3.org/TR/2dcontext/
MDN文檔：https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#fillRect()

來源

2012-01-16 01:02:15 bennedich

這似乎也有不幸的後果，事情應該是完全從可見的畫布剪輯有時不是。例如，從（10，bigNumber）到（11，largerNumber）的一行。 – jwelsh 2015-10-11 23:02:04

在HTML畫布中的大數翻譯結果奇怪的行爲

回答

相關問題