html canvas 鼠标拉伸绘制五角星（可鼠标拉伸缩放）

代码：

function starDraw(cxt,x,y,w,h)
	{
		cxt.beginPath();
        cxt.moveTo(x,y+h*0.39);
		cxt.lineTo(x+w*0.38,y+h*0.373);
		cxt.lineTo(x+0.5*w,y);
		cxt.lineTo(x+w*0.62,y+h*0.373);
		cxt.lineTo(x+w,y+h*0.39);
		cxt.lineTo(x+w*0.7,y+h*0.62);
		cxt.lineTo(x+w*0.81,y+h);
		cxt.lineTo(x+w*0.5,y+h*0.77);
		cxt.lineTo(x+w*0.19,y+h);
		cxt.lineTo(x+w*0.3,y+h*0.62);
        cxt.closePath();
		cxt.stroke();
	}

说明：cxt为画布，x，y为鼠标拉伸区域的左上角，w，h为鼠标拉伸区域的宽和高

完整代码：

<canvas id="drawBoard" width="600px" height="600px" style="border:1px solid #d3d3d3;">你的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
		//获取某个html元素的定位
        function GetPos(obj) {
            var pos = new Object();
            pos.x = obj.offsetLeft;
            pos.y = obj.offsetTop;
            while (obj = obj.offsetParent) {
                pos.x += obj.offsetLeft;
                pos.y += obj.offsetTop;
            }
            return pos;
        };
	
		/** 
 * 获取滚动条距离顶端的距离 
 * @return {}支持IE6 
 */  
			function getScrollTop() {  
        var scrollPos;  
        if (window.pageYOffset) {  
        scrollPos = window.pageYOffset; }  
        else if (document.compatMode && document.compatMode != 'BackCompat')  
        { scrollPos = document.documentElement.scrollTop; }  
        else if (document.body) { scrollPos = document.body.scrollTop; }   
        return scrollPos;   
} 
			function getTrPos(obj)
			{
				var pos =GetPos(obj);
				var spos=getScrollTop();
				spos=parseInt(spos, 10);
				pos.y=pos.y-spos;
				return pos;
			}
	
	
var drac=document.getElementById('drawBoard');
var dractx=drac.getContext('2d');
	var mds=false,cds=true;
	var stx,sty,enx,eny;
drac.addEventListener('mousedown', function(e){
if(cds)
{
	var pos =getTrPos(drac);
		stx=e.clientX-pos.x;
		sty=e.clientY-pos.y;
	mds=true;
}
		
	});
	drac.addEventListener('mousemove', function(e){
		if(cds&&mds)
		{
			var pos =getTrPos(drac);
			var x=e.clientX-pos.x;
			var y=e.clientY-pos.y;
			var mx=x<stx?x:stx;
			var my=y<sty?y:sty;
			var w=x>stx?x-stx:stx-x;
			var h=y>sty?y-sty:sty-y;
			
			var rr=w/2/0.95;
			
			dractx.clearRect(0, 0, drac.width, drac.height);
			starDraw(dractx,mx, my, w, h);
			dractx.strokeRect(mx, my, w, h);
		}
	});
	drac.addEventListener('mouseup', function(e){
		if(cds)
		{
			mds=false;
		dractx.clearRect(0, 0, drac.width, drac.height);
		var pos =getTrPos(drac);
			var x=e.clientX-pos.x;
			var y=e.clientY-pos.y;
			var mx=x<stx?x:stx;
			var my=y<sty?y:sty;
			var w=x>stx?x-stx:stx-x;
			var h=y>sty?y-sty:sty-y;
			starDraw(dractx,mx, my, w, h);
			dractx.strokeRect(mx, my, w, h);
			cds=false;
		}
		
	});
	
	function starDraw(cxt,x,y,w,h)
	{
		cxt.beginPath();
        cxt.moveTo(x,y+h*0.39);
		cxt.lineTo(x+w*0.38,y+h*0.373);
		cxt.lineTo(x+0.5*w,y);
		cxt.lineTo(x+w*0.62,y+h*0.373);
		cxt.lineTo(x+w,y+h*0.39);
		cxt.lineTo(x+w*0.7,y+h*0.62);
		cxt.lineTo(x+w*0.81,y+h);
		cxt.lineTo(x+w*0.5,y+h*0.77);
		cxt.lineTo(x+w*0.19,y+h);
		cxt.lineTo(x+w*0.3,y+h*0.62);
        cxt.closePath();
		cxt.stroke();
	}
	

</script>