javascript - Canvas 坐标溢出？

Question

如何防止某些 Canvas 坐标溢出？

案例:

以下javascript:

 var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");
 canvas.width = 500;
 canvas.height = 500;
 context.strokeStyle = "#000";
 context.beginPath();
 // line from (100, 100) to (100,999999999999.9)
 context.moveTo(100.0, 100.0);
 context.lineTo(100.0, 999999999999.9); 
 // line from (200, 200) to (200,9999999999999.9)
 context.moveTo(200.0, 100.0);
 context.lineTo(200.0, 9999999999999.9);
 context.stroke();

给出这个 Canvas 输出

在这些示例中，两行的结束 Y 坐标均为正数，但第二行似乎被解释为 -Inf。似乎在内部将这些值转换为一些 unsigned int 使一些位值被视为符号，但我没有找到关于它的明确文档。

更新

我想要的是正确绘制线条，而不是防止绘制带有 Canvas 图像坐标的线条。我知道有一种方法可以做一些线性代数(计算线和边界之间的交点)，但我想知道是否有一些更简单的方法。

Answer 1

tl;dr Jsfiddle

moveTo 和lineTo 参数的数据类型是unrestricted double .你可以看到它是 32 位 float ，大概是有符号的。这意味着根据规范，应该没有溢出，错误取决于您的浏览器的实现。

我的测试证实了这一点，因为 Firefox、Google Chrome 或 Opera 都没有呈现任何东西，表明未定义的可疑行为。如果坐标无效，我预计会出现错误。如果我使用较小的坐标 (300)，他们都提供了这个结果(裁剪、加框):

然后我进行了一些测试，最后可以呈现的数字是:

Math.pow(2,31)-Math.pow(2,6)-1 = 2147483583

因此，如果您实际上是在尝试解决问题而不是出于好奇而提出问题，我建议采用以下两种解决方案之一:

1. 制作一个辅助函数来限制坐标。

     var max = 2147483583;
     var min = -2147483583;
     function safeCoordinate(number) {
       if(number>max)
         return max;
       if(number<min)
         return min;
       return number;
     }
   

   然后调用:

   context.lineTo(safeCoordinate(x), safeCoordinate(y)); 
   

2. 覆盖实际的 Canvas 方法以解决问题

   如果您觉得困难，您实际上可以继续并覆盖 Canvas 上下文方法。但是，许多人会建议您不要这样做，因为更改内置内容通常会导致难以追踪的神秘错误。有了这个警告:

   (function(max, min, context_proto) {
             // Override move to
             var old_moveTo =context_proto.moveTo;
             context_proto.moveTo = function(x, y) {
                 return old_moveTo.call(this, safeCoordinate(x), safeCoordinate(y));   
             }
             var old_lineTo =context_proto.lineTo;
             context_proto.lineTo = function(x, y) {
                 return old_lineTo.call(this, safeCoordinate(x), safeCoordinate(y));   
             }
             // Override more methods if needed!
               ...
             // Our helper function
             function safeCoordinate(number) {
               if(number>max)
                 return max;
               if(number<min)
                 return min;
               return number;
             }  
   })(2147483583,-2147483583, CanvasRenderingContext2D.prototype);