帆布和弦溢出？

Question

如何防止一些画布和弦溢出？

案例：

以下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();

给出这个画布输出

​

​

在这些例子中，两行的结尾都是Y-coord正，但第二行似乎被解释为-Inf。在内部，这些值似乎被转换为一些unsigned int，使得一些位值被认为是一个符号，但我没有找到关于它的明确文档。

更新

我想要的是正确地绘制这条线，而不是防止用画布图像中的和弦画线。我知道有一种方法可以做线性代数(计算直线和边框之间的交点)，但我想知道是否有更简单的方法。

Answer 1

杰斯菲德尔博士

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

我的测试证实了这一点，因为火狐、谷歌Chrome和Opera都没有渲染任何东西，显示出未定义的可疑行为。如果坐标无效，我预计会出现错误。如果我使用较小的坐标(300)，它们都提供了这个结果(裁剪，框)：

​

​

然后我执行了一些测试，最后一个可以呈现的数字是：

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

因此，如果你真的试图解决一个问题，而不是出于好奇，我提出以下两种解决方案之一：

1. 创建了一个辅助函数来限制坐标. 变量max = 2147483583；var min = -2147483583；函数safeCoordinate(数字){ if(number>max)返回最大值；if(number然后打电话： context.lineTo(safeCoordinate(x)，safeCoordinate(y))；
2. 重写实际的画布方法以修复问题 如果感觉很困难，实际上可以继续重写画布上下文方法。不过，很多人会建议你不要这样做，因为改变内置的东西往往会导致难以追踪的神秘错误。在此警告之后： (函数(max，min，context_proto) { //覆盖移动到var old_moveTo =context_proto.moveTo；context_proto.moveTo =函数(x，y) {返回old_moveTo.call(this，safeCoordinate(x)，safeCoordinate(y))；} var old_lineTo =context_proto.lineTo；context_proto.lineTo =函数(x，y) {返回old_lineTo.call(this，safeCoordinate(x)，safeCoordinate(y))；} //在需要时重写更多方法！. //我们的辅助函数safeCoordinate(数字){ if(number>max)返回最大值；如果(number

Answer 2

假设我们有一个canvas.height = 500和canvas.width = 500，我们希望防止和弦在0 to 500范围内。当使用function()调用上下文时，我们可以使用这些属性来设置范围。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
context.strokeStyle = "#000";
letsDraw(100, 200, 800, 300); //Returns Alert Error


function letsDraw(moveToX, moveToY, lineToX, lineToY){
     if((moveToX<canvas.width && moveToX>0) && (moveToY<canvas.height && moveToY>0)){
       context.beginPath();
       context.moveTo(moveToX, moveToY);
       if((lineToX<canvas.width && lineToX>0) && (lineToY<canvas.height && lineToY>0)){
         context.lineTo(lineToX, lineToY);
         context.stroke();
       } else {
         alert("Range outside Canvas");
         return false;
       }
     } else {
       alert("Range outside Canvas");
       return false;
     }
}