Html5 canvas 绘制到CanvasRenderingContext2D时的大小限制

我对这个问题进行了大量编辑，以提供更多细节

我在通过EaselJS框架绘制CanvasRenderingContext2D时遇到了一个限制。我有这样的物体：

但是当这些物体的位置超过几百万像素时，这些图形就开始崩溃。这是与x位置58524928相同的对象。（父容器移动到-58524928，以便我们可以在舞台上看到对象。）我偏移对象越多，它将破碎得越多。另外，当我尝试移动对象时——用鼠标拖动它——它会“跳跃”，就像受到大网格的影响一样

这是EaseJS框架，最终通过drawImage（）方法将形状绘制到CanvasRenderingContext2D。以下是代码片段：

ctx.drawImage（cacheCanvas，this.\u cacheOffsetX+this.\u filterOffsetX，this.\u cacheOffsetY+this.\u filterOffsetY，cacheCanvas.width/scale，cacheCanvas.height/scale）

我想这与JavaScript中有限的实数有关：

请注意，有无穷多个实数，但只有一个有限的实数 可以表示它们的数量（确切地说是18437736874454810627） 完全由JavaScript浮点格式实现。这意味着当 您使用的是JavaScript中的实数，表示 该数字通常是实际数字的近似值

资料来源：

有人能证实/否定我的假设吗？5800万（58524928）对我来说似乎并不多，这是画架的低效还是画布的局限

附言： 缩放没有效果。我把所有的东西都画了1000倍小，1000倍近，没有效果。同样，如果将对象放大1000倍，而仍然是x:5800万，它看起来不会破碎。但如果把它移到500亿美元，你就是你的起点。基本上，偏移量除以大小是细节的恒定限制

编辑

下面是示例jsfiddle.net/wzbsbtgc/2。基本上有两个不同的问题

如果我使用大量数字作为图形本身的参数（红色曲线），它将被扭曲。这可以通过使用较小的数字并移动DisplayObject（蓝色曲线）来避免

在这两种情况下，都不可能将DisplayObject移动1px。我想这在游戏炼金术士的帖子里有解释

---

欢迎对第二个问题提出任何建议/解决方法

您可以使用所需的任意大小的图形坐标。

Canvas会将图形剪辑到Canvas元素的显示区域

例如，这里有一个演示，它从x=-50000000开始画一条线，并在画布上结束。仅渲染线的可见部分。将剪裁所有不可见（画布外）点

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
ctx.beginPath（）；
ctx.moveTo（-500000000100）；
ctx.lineTo（150100）；
ctx.stroke（）
body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}
这一行从x=负5000万开始！
您可以使用所需的任意大小的图形坐标。

Canvas会将图形剪辑到Canvas元素的显示区域

例如，这里有一个演示，它从x=-50000000开始画一条线，并在画布上结束。仅渲染线的可见部分。将剪裁所有不可见（画布外）点


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
ctx.beginPath（）；
ctx.moveTo（-500000000100）；
ctx.lineTo（150100）；
ctx.stroke（）
body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}
这一行从x=负5000万开始！
请记住，W3C标准的目标受众主要是浏览器供应商。无符号长值（或232）更适合于通过浏览器创建位图的基础系统。该标准称此范围内的值是有效的，但不能保证底层系统能够提供如此大的位图（目前大多数浏览器将位图限制为比此小得多的大小）。您声明您不是指canvas元素本身，但是link引用是元素的接口定义，所以我只想指出关于数字范围的这一点

从JavaScript方面来看，我们开发人员通常都是这样，除了类型化数组之外，没有ulong之类的东西。只有
Number
（又称
unrestricted double
）是有符号的，并以64位存储数字，格式为IEEE-754

编号的有效范围为：

Number.MIN_VALUE = 5e-324
Number.MAX_VALUE = 1.7976931348623157e+308

您可以将此范围内的任何值与画布一起用于向量路径。当路径被光栅化时，画布将根据当前变换矩阵将它们剪裁到位图

如果您所指的绘制是指另一个位图（即图像、画布、视频），则它们将受到与目标画布本身相同的系统和浏览器功能/限制。定位（直接或通过转换）受到数字范围的限制。
请记住，W3C标准的目标受众主要是浏览器供应商。无符号长值（或232）更适合于通过浏览器创建位图的基础系统。该标准称此范围内的值是有效的，但不能保证底层系统能够提供如此大的位图（目前大多数浏览器将位图限制为比此小得多的大小）。您声明您不是指canvas元素本身，但是link引用是元素的接口定义，所以我只想指出关于数字范围的这一点

从JavaScript的角度来看，w
 IEEE_754_32max = ( 1 << 23 ) -1 = 8.388.6071  (8+ millions)  

    10.000.001 = 10.000.00• * 10 = 1e7 = 10.000.000  

 58524928 + 7 == 58524928  

Object.defineProperty(targetObject, 'x', { get : function() { return view.pixelWidth*(this.rx-view.left)/view.width ;  } }