canvas绘制三角形

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

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();
	}

画了一个闭合的三角形

实例2

	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();
	}

画出一个实心的三角形

注意：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();
	}

改变填充的颜色

实例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();
	}

加上了边框和颜色