Canvas线条连接

lineJoin属性决定两条线段相交处的连接样式。

基本语法

ctx.lineJoin = 'miter' | 'round' | 'bevel'

三种连接样式

说明
miter尖角连接,默认值
round圆角连接
bevel斜角连接

连接样式演示

三种连接样式对比

不同角度的连接效果

不同角度的连接效果

尖角限制

miter连接在角度很小时会产生过长的尖角,需要配合miterLimit使用。

ctx.lineJoin = 'miter'
ctx.miterLimit = 10  // 默认值

// 当尖角长度超过限制时,自动转换为bevel

尖角溢出演示

尖角溢出自动转换

应用场景

miter:几何图形、技术图纸

round:柔和曲线、手绘风格、UI元素

bevel:避免尖角过长、现代设计

复杂路径连接

复杂路径的连接效果

注意事项

lineJoin只在线段转角处生效,直线段和曲线段不受影响。