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

        context.lineTo(480,380);   
        context.lineJoin = ‘bevel’;   
        context.lineCap = ’round’;   
        context.lineWidth = 10;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        // 实例3: 平直端点,圆形连接,不在画布左上角   
        context.beginPath();   
        context.moveTo(600,400);   
        context.lineTo(780,400);   
        context.lineTo(780,580);   
        context.lineJoin = ’round’;   
        context.lineCap = ‘butt’;   
        context.lineWidth = 10;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>  

运行结果：

这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。
实例 1 尝试从画布左上角开始绘制，结果发生了一个奇怪的现象。Canvas 路径在 x 轴和 y 轴方向上都绘制到了起点的外侧。由于这个原因实例 1 上面的线看起来要细些。另外，左上角水平部分中圆形端点也无法看到，它们都被绘制到了屏幕之外的负值坐标区域。此外，lineJoin 定义的对角线斜角也没有绘出。
实例 2 调整了例子 1 中出现的问题,将起始点离开左上角。这样就绘制出了完整的水平线,并且圆形 lineCap 和斜角 lineJoin 都被绘制出来了。
实例 3 显示了去掉 lineCap 设置后的默认端点效果,并且将 lineJoin 调整为圆角。