在canvas中画三角形的实现

这几天在学习HTML5中的一个新标签canvas，发现这个标签这的太强大了，几乎可以完成所有画图的功能，比如线、矩形、圆、实心圆、实心矩形（面），还有个人认为最不好画的三角形。下面我就以画等边三角形为例来分析一下在canvas中怎样画：

首先分析一下画三角形的过程：

鼠标点下去的时候->获取三角形的中心点
鼠标抬起来的时候->获取三角形右下角的顶点
鼠标移动的时候->不做任何操作
鼠标移出画布的时候也不做任何操作

再来看一张分析图：

图中已经分析得很清楚了，画三角形的起点是在中心点上，与画其他图形的起始点是不一样的，其次一定要注意平面坐标系在电脑的屏幕上和现实生活中是不一样的，它的圆点是在电脑屏幕的左上角为（0,0）点，水平方向为X，竖直方向为Y，所以我们在计算第三个点的坐标y的时候用engY -c ,这点很重要。

下面我把js粘贴出来，仅供参考：

var polyX=0;
var polyY=0;
function drawPoly(num){
	setStatus(actions,num,1);
		canvas.οnmοusedοwn=function(evt){
			evt=window.event||evt;
			//获取开始点的坐标
			 polyX=evt.pageX-this.offsetLeft;
			 polyY=evt.pageY-this.offsetTop;
		}
		canvas.οnmοusemοve=null;
		canvas.οnmοuseοut=null;
		canvas.οnmοuseup=function(evt){
			evt=window.event||evt;
			//获取鼠标结束点的坐标
			var endX=evt.pageX-this.offsetLeft;;
			var endY=evt.pageY-this.offsetTop;
			cxt.beginPath();
			cxt.moveTo(endX,endY);
			//三角形左下角点的坐标
			var m=2*polyX-endX;
			var n=endY;
			cxt.lineTo(m,n);
			//三角形第三个顶点的坐标
			var a=2*(polyX-endX);
			var b=polyX-endX;
			var c=Math.sqrt(a*a-b*b);
			cxt.lineTo(polyX,endY-c);
			cxt.closePath();
			cxt.stroke();
		}
}