Question

通常，在绘制一系列线条时，lineJoin为"bevel"时受影响的区域将小于设置为"round"时受影响的区域，以及受lineJoin时受影响的区域1}} "miter"将大于"round"，但每个都有例外 - 一个记录，一个不记录。

首先，据记载，超出顶点延伸超过（lineWidth * miterLimit）的斜接接头会转换为丑陋的斜面接头。这种行为在它开始时产生了可怕的结果（因为关节从填充比“圆形”关节更大的区域填充到更小的区域），但它似乎与文档匹配。

行为更有趣，但是，如果顶点被分成两部分，它们之间有一条短线或零长线。当使用斜接接头时，这种技术使得可以以可配置的角度“修剪”斜切。然而有趣的是，如果短线小于一定长度（或者如果它的长度为零），Firefox会渲染斜接关节，好像短线是一条垂直于角度平分线的无穷小线（很好的行为 - 它也是糟糕，没有办法要求所有线路关节都这样做）。奇怪的是，在这种情况下，斜面关节的行为类似于斜接接头（斜接的“未记录的”例外＆gt;圆形＆gt;斜面等级）。

文档是否存在连接序列中零或接近零长度行的行为或判断行长度是否为零的标准？浏览器行为的一致性如何？

使用以下代码在jsfiddle中测试行为（应该可以在http://jsfiddle.net/A8Eb7/1/处获得，而无需复制/粘贴）。请注意，jsfiddle第二个下拉菜单必须设置为no wrap - in <body>。

按钮允许右主顶点的X和Y坐标以20像素为增量进行调整，并允许添加顶点的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>

和JavaScript：

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

Answer 1

canvas {2}上下文的官方规范可以在W3C的网站上找到。本文档中未描述的任何行为取决于实现浏览器。

是否指定了HTML5 lineJoin的角落案例

1 个答案: