Javascript 是否指定了HTML5 lineJoin的角盒

通常，在绘制一系列直线时，lineJoin为“倒角”时受影响的区域将小于设置为“圆形”时受影响的区域，而lineJoin为“斜接”时受影响的区域将大于lineJoin为“圆形”时受影响的区域，但每个区域都有一个记录在案的区域和一个未记录在案的区域作为例外

首先，有文献记载，将延伸超过线宽*斜接限制超过顶点的斜接接头会转换为难看的斜接接头。这种行为在开始时会产生可怕的结果，因为关节从填充比圆形关节大得多的区域到填充小得多的区域，但似乎与文档相符

然而，如果一个顶点被一分为二，并且在它们之间有一条短的或零长度的线，那么行为就更有趣了。使用斜接接头时，这种技术可以以可配置的角度修剪斜接。然而，有趣的是，如果短线小于某个长度，或者如果其长度为零，Firefox渲染斜接关节，就好像短线是垂直于角度平分线的一条无限小的线一样。很好，这太糟糕了，没有办法要求所有线关节都以这种方式工作。奇怪的是，斜接关节的行为类似于斜接关节，在这种情况下，斜接>圆形>斜接排序的未记录异常

是否有任何文件记录了连接序列中长度为零或接近零的直线的行为，或确定直线长度是否为零的标准？浏览器行为的一致性如何

行为是在JSFIDLE中测试的，下面的代码应该在上可用，而无需复制/粘贴。注意，第二个下拉列表必须设置为no wrap-in

按钮允许以20像素的增量调整右主顶点的X和Y坐标，并允许将添加顶点的X和Y位移设置为+/-1或零，或减少四倍，以测试它们在被视为零之前的小程度。jinx on（打开）和jinx off（关闭）按钮控制系统是否应仅打印三个主要顶点，还是应在右侧和线末端添加其他顶点，以显示如何控制线帽行为

线条将显示为带有圆形封盖/连接、方形/斜接和对接/斜面封盖和连接的笔划。圆形形状将显示为深色轮廓，方形/斜接为纯色浅绿色，对接/斜接为棕色。默认设置是启用jinx，第二个点位于主点下方一个像素；这将导致绿线的右边缘垂直。单击Y=0将显示长度为零的线的情况。右边缘将垂直于绘制角度的平分线

演示HTML：

<canvas id="pic" width=600 height=250>Test</canvas>
<p id="WOW">Testing</p>
<button onClick = "{jointX+=20; show(); }">X +20</button>
<button onClick = "{jointX-=20; show(); }">X -20</button>
<button onClick = "{deltaX=1; show(); }">dX = 1</button>
<button onClick = "{deltaX=-1; show(); }">dX = -1</button>
<button onClick = "{deltaX*=0.25; show(); }">dX /2</button>
<button onClick = "{deltaX=0; show(); }">dX = 0</button><br>
<button onClick = "{jointY+=20; show(); }">Y +20</button>
<button onClick = "{jointY-=20; show(); }">Y -20</button>
<button onClick = "{deltaY=1; show(); }">dY = 1</button>
<button onClick = "{deltaY=-1; show(); }">dY = -1</button>
<button onClick = "{deltaY*=0.25; show(); }">dY /2</button>
<button onClick = "{deltaY=0; show(); }">dY = 0</button><br>
<button onClick = "{jinx=0; show(); }">Jinx off</button>
<button onClick = "{jinx=1; show(); }">Jinx on</button>

---

canvas 2d上下文的官方规范可在的网站上找到。本文档中未描述的任何行为由实施浏览器决定。

本文档第3节似乎未描述观察到的行为；事实上，当dx，dy为0,0时，Firefox中斜接关节的行为同时与规范相反，该规范规定应修剪零长度线段，这意味着它们不影响关节的渲染方式，但在不需要使用圆连接的情况下，允许具有非常锐角的一致外观角非常有用。你知道有什么努力来记录绘制这些角的好方法吗？经过进一步的调查，FireFox中的转换矩阵似乎使用了float类型，但坐标处理是在double类型中完成的。考虑到一个转换的结果经常被用作另一个转换的输入，我认为这是一种奇怪的组合。这种用法合法吗？

var c=document.getElementById("pic");
var p=document.getElementById("WOW");
var cx=c.getContext("2d");
var jointX = 320;
var jointY = 40;
var deltaX = 0;
var deltaY = 1;
var jinx = 1;
function show()
{
    p.innerHTML = "start";
    cx.save();
    cx.clearRect(0,0,600,250);
    cx.beginPath();
    cx.moveTo(40,40);
    cx.lineTo(jointX,jointY);
    if (jinx)
      cx.lineTo(jointX+deltaX,jointY+deltaY);
    cx.lineTo(40,120);
    if (jinx)
    {
      cx.lineTo(40+deltaX,120+deltaY);
      cx.lineTo((40+jointX)/2,(120+jointY)/2);
    }
    cx.lineJoin="round";
    cx.lineCap="round";
    cx.lineWidth=40;
    cx.strokeStyle="rgba(0,0,0,1)";
    cx.stroke();
    cx.lineWidth=35;
    cx.strokeStyle="rgba(255,255,255,1)";
    cx.stroke();
    cx.lineJoin="miter";
    cx.lineCap="square";
    cx.lineWidth=40;
    cx.strokeStyle="rgba(0,255,0,0.5)";
    p.innerHTML = "end1";
    cx.stroke();
    cx.lineJoin="bevel";
    cx.lineCap="butt";
    cx.lineWidth=40;
    cx.strokeStyle="rgba(255,0,0,0.5)";
    p.innerHTML = "end1";
    cx.stroke();
    cx.restore();
    if (jinx)
      p.innerHTML = "(" + jointX + "," + jointY + ") " +
          "jinx by (" + deltaX + "," + deltaY + ") ";
    else
      p.innerHTML = "(" + jointX + "," + jointY + ") " +
          "jinx off";        
}
show();