canvas绘制三角形

左手的ㄟ右手 2021-07-24 23:45 522阅读 0赞

### 主要还是利用画直线的方法 ###

lineTo   moveTo

### 实例1 ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		//先将笔尖移动到0,0处
    		ctx.moveTo(100,100);
    		//先将笔滑到200,200处
    		ctx.lineTo(200,200);
    		//再将笔滑到150,220处
    		ctx.lineTo(150,230);
    		//再将笔滑到100,100处 形成闭合的三角形
    		ctx.lineTo(100,100);
    		
    		//执行绘画的动作，如果没有执行stroke函数不会有任何的效果
    		ctx.stroke();
    	}

画了一个闭合的三角形

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 实例2 ###

画出一个实心的三角形

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

注意：fill函数会自动闭合图形，也就是最后一个ctx.lineTo(100,100); 可以不写

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		//先将笔尖移动到0,0处
    		ctx.moveTo(100,100);
    		//先将笔滑到200,200处
    		ctx.lineTo(200,200);
    		//再将笔滑到150,220处
    		ctx.lineTo(150,230);
    		//再将笔滑到100,100处 形成闭合的三角形
    		//ctx.lineTo(100,100);
    		
    		//填充这个图形
    		ctx.fill();
    	}

注销了这个代码依然是可以的

### 实例3 ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		//先将笔尖移动到0,0处
    		ctx.moveTo(100,100);
    		//先将笔滑到200,200处
    		ctx.lineTo(200,200);
    		//再将笔滑到150,220处
    		ctx.lineTo(150,230);
    		//再将笔滑到100,100处 形成闭合的三角形
    		//ctx.lineTo(100,100);
    		ctx.fillStyle='green';//改变填充颜色
    		//填充这个图形
    		ctx.fill();
    	}

改变填充的颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

### 实例4 ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		//先将笔尖移动到0,0处
    		ctx.moveTo(100,100);
    		//先将笔滑到200,200处
    		ctx.lineTo(200,200);
    		//再将笔滑到150,220处
    		ctx.lineTo(150,230);
    		//再将笔滑到100,100处 形成闭合的三角形
    		ctx.lineTo(100,100);
    		ctx.fillStyle='green';//改变填充颜色
    		//填充这个图形
    		ctx.fill();
    		
    		ctx.lineWidth=5;
    		ctx.strokeStyle='red';
    		//执行绘画
    		ctx.stroke();
    	}

加上了边框和颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/47e2994486004c78bfd169a499b73ab0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/87c948edb75a47eb84f6da1f5f6d8280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/2f6e3d16bae641b3b58a3a4b66f95a40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3]: /images/20210724/c736df83012d4fb8bc2902b054d60202.png