Question

我正在试图弄清楚为什么，当我在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的行为似乎都相同，因此看似预期的行为，而不是浏览器错误。我猜它是某种精确问题。你同意/不同意吗？

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

谢谢！

Answer 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()

HTML canvas中的大数字翻译会导致奇怪的行为

1 个答案: