HTML 画布中的大量数字会导致奇怪的行为答案

【问题标题】：Large numbers in HTML canvas translate result in strange behaviorHTML 画布中的大量数字会导致奇怪的行为
【发布时间】：2012-01-18 12:51:12
【问题描述】：

我试图弄清楚为什么当我在 HTML 画布上为 translate() 调用的 x 组件提供很大的数字时，矩形似乎不再在适当的坐标处绘制。

在下面的示例中，绘制的两个矩形在 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/

我还制作了动画版本。 http://jsfiddle.net/ry35e/ 如您所见，绘图开始正常，但随着 translate 方法的 x 参数增加，它继续具有越来越奇怪的行为。

Firefox 和 Chrome 的行为似乎相同，因此这似乎是预期行为，而不是浏览器错误。我猜这是某种精度问题。你同意/不同意吗？

如果是画布的某种精度问题，我猜我将不得不找到或实现自己的转换矩阵并将其包裹在画布上下文中。我敢肯定它不会很难，但是有人知道一个 javascript 库可以进行这种转换（使用 pop、push 等）吗？

谢谢！

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

当您使用整数 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()

【讨论】：

这似乎也有一个不幸的后果，即应该从可见画布上完全裁剪的东西有时却没有。例如从 (10, bigNumber) 到 (11, largeNumber) 的一行。