111.html测试测量角度自己看别人看了没用

本文链接：https://blog.csdn.net/Sayesan/article/details/48241849
<!DOCTYPE>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
	var list=[];
	var currentC;
	var _e={};
    var cricle = function(x,y,r){
    	this.x=x;
    	this.y=y;
    	this.r=r;
    	this.isCurrent=false;
    	this.drawC=function(ctx,x,y){
    		var c=document.getElementById("tutorial");
        var cxt=c.getContext("2d");	
     
 			  //背景色		
        //cxt.fillStyle   = '#000';
        //cxt.strokeStyle = '#fff';
        //cxt.fillRect(0,0,1000,550);
        //cxt.lineWidth  = 1;
       // cxt.fill();
 
         //刷图
        //var img = new Image()
        //img.src = "Untitled.jpg"
        //cxt.drawImage(img, 0, 0); 
        //var pix;    
        //var Tempimaged = cxt.getImageData(0, 0, 512, 512);
       // pix = Tempimaged.data;
        //for (var i = 0, j = 0; i < 262144; i++, j += 4) {
         //  pix[j] = 255 - pix[j];
         //  pix[j + 1] = 255 - pix[j + 1];
        //   pix[j + 2] = 255 - pix[j + 2];
         //  pix[j + 3] = 255;
        // }
         //cxt.putImageData(Tempimaged, 0, 0);  

        
    		ctx.save();
			  ctx.beginPath();
			  ctx.arc(this.x,this.y,this.r,0,2*Math.PI,true);
			 
			  if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {
					ctx.fillStyle = '#ff0000';
					currentC=this;
					this.isCurrent=true;

			  }else{
				ctx.fillStyle = '#999999';
			  }
			   ctx.fill();
			   ctx.stroke(); 
			  
         ctx.strokeText("w3school.com.cn",10,90);

    
    	}
    }
	function draw()
	{
		var canvas = document.getElementById('tutorial');
		if (canvas.getContext)
		{
			var ctx = canvas.getContext('2d');
			for(var i=0;i<3;i++){
				//ctx.save();
				var c=new cricle(200*(i+1),200,15);
				c.drawC(ctx);
				list.push(c);
				//ctx.restore();
    		}
    		
			ctx.beginPath();
			var c3 = list[2];
			ctx.arc(c3.x,c3.y,15,0,2*Math.PI,true);
      ctx.stroke();
      
    	for(var i=0;i<2;i++)
    	{
        ctx.beginPath();
        ctx.moveTo(c3.x,c3.y);
        var cx = list[i];
        ctx.lineTo(cx.x,cx.y);
        ctx.stroke();
			}	
    		
    		
	    var dx1,dy1,dx2,dy2;
	    var DotProduct,Norm1,Norm2;
	    //新begin
	    var c1=list[0];
	    var c2=list[1];
	    dx1=c1.x-c3.x;
	    dy1=c1.y-c3.y;
	    dx2=c2.x-c3.x;
	    dy2=c2.y-c3.y;

	    DotProduct=dx1*dx2+dy1*dy2;
	    if ((dx1*dx1+dy1*dy1)<0 ||(dx2*dx2+dy2*dy2)<0)
	    {
	    	return;
	    }
	    Norm1=Math.sqrt(dx1*dx1+dy1*dy1);
	    Norm2=Math.sqrt(dx2*dx2+dy2*dy2);
	    if (Norm1*Norm2<4)
	    {
	    	return;
	    }
	    var tmp;
	    var m_dblAngle;
	    
	    tmp = DotProduct/(Norm1*Norm2);
	    if (tmp>=-1 && tmp<=1)  //koko 20120409
	    {
	    	m_dblAngle=Math.acos(tmp);
	    }
	    //else
	    //{
	    //	m_dblAngle=Math.acos(0.5);
	    //}
	    m_dblAngle=Math.floor(m_dblAngle*57.29578);//180/3.14
	    ctx.strokeText(m_dblAngle,200,200);
		}
	}
	
	function reDraw(e){
		e=e||event;
		var canvas = document.getElementById('tutorial');
		var x = e.clientX - canvas.offsetLeft;
		var y = e.clientY - canvas.offsetTop;

		canvas.width = canvas.width;
		if (canvas.getContext)
		{
			var ctx = canvas.getContext('2d');
			for(var i=0;i<list.length;i++){
				//ctx.save();
				var c=list[i];
				c.drawC(ctx,x,y);
				//ctx.restore();
			}
			
			
			ctx.beginPath();
			var c3 = list[2];
			ctx.arc(c3.x,c3.y,15,0,2*Math.PI,true);
      ctx.stroke();
      
    	for(var i=0;i<2;i++)
    	{
        ctx.beginPath();
        ctx.moveTo(c3.x,c3.y);
        var cx = list[i];
        ctx.lineTo(cx.x,cx.y);
        ctx.stroke();
			}

			
			var dx1,dy1,dx2,dy2;
	    var DotProduct,Norm1,Norm2;
	    //新begin
	    var c1=list[0];
	    var c2=list[1];
	    dx1=c1.x-c3.x;
	    dy1=c1.y-c3.y;
	    dx2=c2.x-c3.x;
	    dy2=c2.y-c3.y;

	    DotProduct=dx1*dx2+dy1*dy2;
	    if ((dx1*dx1+dy1*dy1)<0 ||(dx2*dx2+dy2*dy2)<0)
	    {
	    	return;
	    }
	    Norm1=Math.sqrt(dx1*dx1+dy1*dy1);
	    Norm2=Math.sqrt(dx2*dx2+dy2*dy2);
	    if (Norm1*Norm2<4)
	    {
	    	return;
	    }
	    var tmp;
	    var m_dblAngle;
	    
	    tmp = DotProduct/(Norm1*Norm2);
	    if (tmp>=-1 && tmp<=1)  //koko 20120409
	    {
	    	m_dblAngle=Math.acos(tmp);
	    }
	    //else
	    //{
	    //	m_dblAngle=Math.acos(0.5);
	    //}
	    m_dblAngle=Math.floor(m_dblAngle*57.29578);//180/3.14
	    ctx.strokeText(m_dblAngle,200,200);
		}
	
	}
	
	function show(e){
		e=e||event;
		var canvas = document.getElementById('tutorial');
		var ctx = canvas.getContext('2d');
		var x = e.clientX - canvas.offsetLeft;
		var y = e.clientY - canvas.offsetTop;
			

		if(currentC){
			currentC.x=parseInt(x+(x-currentC.x)/5);
			currentC.y=parseInt(y+(y-currentC.y)/5);
		}
		_e=e;
		
}

	window.οnlοad=function(){
		
		var canvas = document.getElementById('tutorial');
		draw();

		canvas.οnmοusedοwn=function(e){
			e=e||event;
			var x = e.clientX - canvas.offsetLeft;
			var y = e.clientY - canvas.offsetTop;
			if(currentC)
				currentC.isCurrent=false;
			currentC=null;
			reDraw(e);
			_e=e;
			  var showTimer=setInterval(function(e){
				reDraw(e);
			  },10,_e);
			canvas.οnmοusemοve=show;

			document.οnmοuseup=function(){
				if(currentC)
					currentC.isCurrent=false;
				currentC=null;
				canvas.οnmοusemοve=null;
				clearInterval(showTimer);
			}
			

		}
	}
</script>
<style type="text/css">
  canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee ;">
    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
    <script>
         /*var c = document.getElementById("tutorial");
         var cxt = c.getContext("2d");
         var img = new Image()
         img.src = "Untitled.jpg"
         cxt.drawImage(img, 0, 0);*/
    </script>
    
    <br />
<br />
<br />

    <div id="xycoordinates"></div>
</body>
</html>