HTML5 Canvas的常用线条属性值总结

        context.lineJoin = "miter";   
        context.miterLimit = 10;   
        context.lineWidth = 5;   
        context.strokeStyle = "red";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(300,200);   
        context.lineTo(500,300);   
        context.lineTo(300,400);   
        context.lineJoin = "miter";   
        context.miterLimit = 10;   
        context.lineWidth = 5;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(500,290);   
        context.lineTo(700,300);   
        context.lineTo(500,310);   
        context.lineJoin = "miter";   
        context.miterLimit = 10;   
        context.lineWidth = 5;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>  

运行结果：

会发现，这个miterLimit规定了一个自动填充连接点的极限值。如果超过了这个值，会导致lineJoin属性失效，会从 miter 变成 bevel。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。

可以看到，关系有点复杂。有兴趣的小伙伴可以推导一下这个值与线宽、夹角的函数关系。其实，大多时候用不到这个隐藏属性，即便用到了也是凭感觉写个数然后不满意再调试即可。