Javascript HTML画布中的大量数字会导致奇怪的行为_Javascript_Html5 Canvas

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

javascript html5-canvas

Javascript HTML画布中的大量数字会导致奇怪的行为,javascript,html5-canvas,Javascript,Html5 Canvas,我试图弄明白，当我在HTML画布上为translate（）调用的x组件指定一个大数字时，矩形似乎不再在适当的坐标处绘制在下面的示例中，绘制的两个矩形在x分量中仅相差1。因此，我希望它们的左边缘仅相隔一个像素。正如您在Firefox和Chrome中所看到的，这并不是实际情况 <html> <head> <script type="text/javascript"> function go() { var canv

我试图弄明白，当我在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>


函数go（）{
var canvas=document.getElementById（“canvas”）；
if（canvas.getContext）{
var ctx=canvas.getContext（“2d”）；
ctx.翻译（-100000000，-500）；
ctx.fillStyle='#F00'
ctx.fillRect（1000000033520100200）；
ctx.fillStyle='#00F'；
ctx.fillRect（1000000032720100200）；
}
}

下面是同一个示例：

我还制作了一个动画版本。如您所见，图形开始时是正常的，但随着translate方法的x参数的增加，它会有越来越奇怪的行为

Firefox和Chrome的行为似乎都是一样的，所以这似乎是预期的行为，而不是浏览器的错误。我猜这是某种精度问题。你同意/不同意吗

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

谢谢

使用2^24（16 777 216）或更大的整数调用

fillRect

时，会出现偏差。这也是可以用单精度表示的最大的整数。工作草案表示支持双精度（2^53），但显然情况并非如此。《CanvasRenderingContext2D》（CanvasRenderingContext2D）的Mozilla开发者网络（MDN）文档说明仅支持单精度（浮点）

单精度：

双精度：

工作草案：

MDN文档：

这似乎还有一个不幸的后果，那就是应该完全从可视画布上剪下来的东西有时却没有剪下来。例如，从（10，bigNumber）到（11，biggerNumber）的一行。