canvas的lineCap线段端点模样和 lineJoin线段连接处模样

待我称王封你为后i 2021-07-24 18:50 306阅读 0赞

### `lineCap` 设置线段端点显示的模样。它可以为下面的三种的其中之一：`butt`，`round` 和 `square，`默认是 `butt。` ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    	    
    	    ctx.beginPath();
    	    ctx.moveTo(50, 100);
    	    ctx.lineTo(50, 200);
    	    ctx.lineWidth=10;
    	    ctx.stroke();
    	    
    	    ctx.beginPath();  
    	    ctx.moveTo(100, 100);
    	    ctx.lineTo(100, 200);
    	    ctx.lineCap='round';
    	    ctx.lineWidth=10;
    	    ctx.stroke();
    	    
    	    ctx.beginPath();  
    	    ctx.moveTo(150, 100);
    	    ctx.lineTo(150, 200);
    	    ctx.lineCap='square';
    	    ctx.lineWidth=10;
    	    ctx.stroke();
    	}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

从图中可以看到第2条线的端点处是圆角，第3条是方形的，都比默认的第一条要长一丢丢。

### `lineJoin` 设定了两线段连接处所显示的模样。值是这三种之一：`round`, `bevel` 和 `miter，`默认是 `miter``。` ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    	    
    	    ctx.beginPath();
    	    ctx.moveTo(100, 100);
    	    ctx.lineTo(50, 150);
    	    ctx.lineTo(100, 200);
    	    ctx.lineWidth=20;
    	    ctx.stroke();
    	    
    	    ctx.beginPath();  
    		ctx.moveTo(150, 100);
    	    ctx.lineTo(100, 150);
    	    ctx.lineTo(150, 200);
    	    ctx.lineJoin ='round';
    	    ctx.lineWidth=20;
    	    ctx.stroke();
    	    
    	    ctx.beginPath();  
    	    ctx.moveTo(200, 100);
    	    ctx.lineTo(150, 150);
    	    ctx.lineTo(200, 200);
    	    ctx.lineJoin ='bevel';
    	    ctx.lineWidth=20;
    	    ctx.stroke();
    	}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

从图中可以看到默认是尖的，第2个设置的round是圆的，第3个设置bevel是平的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/a2f2acf53f82407996fcb95af803212b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/0542fafcb3e448a7ab2a67e56510e0c8.png