需要使用: ctx.lineJoin 属性; 顾名思意是 "线段连接" 的意思. 它的属性值有下面三个: 

1. round: 圆角连接

2. bevel: 矩形拐角连接

3. miter: 折线连接(默认)

function draw() { 
    var canvas = document.getElementById('canv'); 
    if (!canvas.getContext) return; 
    var ctx = canvas.getContext("2d"); 
 
    var lineJoin = ['round', 'bevel', 'miter']; 
    ctx.lineWidth = 20; 
 
    for (var i = 0; i < lineJoin.length; i++) { 
        ctx.lineJoin = lineJoin[i]; 
        ctx.beginPath(); 
        ctx.moveTo(50, 50 + i * 50); 
        ctx.lineTo(100, 100 + i * 50); 
        ctx.lineTo(150, 50 + i * 50); 
        ctx.lineTo(200, 100 + i * 50); 
        ctx.lineTo(250, 50 + i * 50); 
        ctx.stroke(); 
    } 
 
} 
draw();

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样设置线条的末端样式讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。