js在canvas中动态绘制图形

Canvas是html5中的画布标签，利用canvas画布，开发者可以进行图形的展示。本人在实践过程中，利用了canvas进行了图形的动态绘制，在绘制测量角（折线过程中，走了弯路），现作以下记录。

1. 绘制动态直线

 1 1 <!--移动直线-->
 2  2 <!DOCTYPE html>
 3  3 <html>
 4  4 <head>
 5  5     <meta charset="utf-8" />
 6  6     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
 7  7 
 8  8 scale=1,maximum-scale=1,user-scalable=no" />
 9  9     <link rel="shortcut icon" href="../img/LGlogo.png">
10 10     <script src="../js/jquery-2.1.0.js"></script>
11 11     <script src="../js/mobile.js"></script>
12 12 <title>首页 | 测试</title>
13 13 <script>
14 14 function myfun(){
15 15     var canvas = document.getElementById("myCanvas");
16 16     var ctx = canvas.getContext("2d");    
17 17     ctx.strokeStyle = "#458B00";
18 18     ctx.lineWidth = 1;
19 19     var oX,oY;
20 20     //var vX,vY;
21 21     var flag = false;
22 22     var count=0;
23 23     function draw(sx,sy,ex,ey){    
24 24     //ctx.clearRect(0,0,1000,1000);
25 25     ctx.beginPath();
26 26     ctx.moveTo(sx,sy);
27 27     ctx.lineTo(ex,ey);
28 28     ctx.closePath();
29 29     ctx.stroke();
30 30     }
31 31     function comLength(x1,y1,x2,y2)
32 32     {
33 33         var dis=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
34 34         return (dis.toFixed(2));
35 35     }
36 36     function creadiv(x1,y1,x2,y2)
37 37     {        
38 38         var div=document.createElement("div");
39 39         var left=(x1+x2)/2;
40 40         var top=(y1+y2)/2;
41 41         div.style.position="absolute";
42 42         div.style.left=(left)+"px";
43 43         div.style.top=top+"px";        
44 44         div.innerText=comLength(x1,x2,y1,y2)+"mm";
45 45         document.body.appendChild(div);
46 46     }
47 47     canvas.onmousemove = function(e){
48 48     
49 49     if(flag)
50 50     {
51 51         ctx.clearRect(0,0,1000,1000);
52 52         draw(oX,oY,e.pageX,e.pageY);      
53 53     }
54 54 }
55 55     canvas.onclick = function(e){    
56 56     if(!flag){
57 57         oX = e.pageX;
58 58         oY = e.pageY; 
59 59     }
60 60     flag=!flag;
61 61     count++;
62 62     if(count==2)
63 63     {
64 64         creadiv(oX,oY,e.pageX,e.pageY);
65 65         count=0;
66 66     }
67 67     }
68 68 }
69 69 </script>
70 70 <style>
71 71     div{
72 72         font-size: 16pt;
73 73         color:red;
74 74     }
75 75 </style>
76 76 </head>
77 77 <body onload="myfun();">
78 78     <canvas id="myCanvas" width="800" height="600" style="border:solid 1px #CCC;">
79 79 您的浏览器不支持canvas，建议使用最新版的Chrome
80 80 </canvas>
81 81 </body>
82 82 </html>
View Code

canvas教程中对于直线的绘制其实很简单，就是两个步骤，第一步给出起始点，通过moveto()方法来绘制起点；第二步通过lineto()方法连接终点。仅需要两步，一个简单的直线就绘制好了。

此处，我们需要动态的绘制直线，即我们的直线起点和终点均不可知，于是我们在js中加入鼠标点击和移动事件来判断起点和终点位置，再通过方法进行绘制。代码中我们还简单对直线的长度进行了测量和显示（这里没有根据实际情况进行实际长度的计算）。

2. 绘制动态测量角

  1 <!--画测量角-->
  2 <!DOCTYPE html>
  3 <html>
  4 <head>
  5     <meta charset="utf-8" />
  6     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
  7 
  8 scale=1,maximum-scale=1,user-scalable=no" />
  9     <link rel="shortcut icon" href="../img/LGlogo.png">
 10     <script src="../js/jquery-2.1.0.js"></script>
 11     <script src="../js/mobile.js"></script>
 12 <title>首页 | 测试</title>
 13 <script>
 14 function myfun(){
 15     var sx,sy;
 16     var ox,oy;
 17     var ex,ey;
 18     var count=0;
 19     var flag=false;
 20     var canvas=document.getElementById("myCanvas");    
 21     var ctx=canvas.getContext("2d");
 22     ctx.strokeStyle = "#458B00";
 23     ctx.lineWidth = 1;
 24     function draw(x1,y1,x2,y2)
 25     {
 26         ctx.beginPath();
 27         ctx.moveTo(x1,y1);
 28         ctx.lineTo(x2,y2);
 29         ctx.closePath();
 30         ctx.stroke();
 31     }
 32     function creadiv(left,top,t)
 33     {
 34         var div=document.createElement("div");
 35         div.style.position="absolute";
 36         div.style.left=(left-30)+"px";
 37         div.style.top=top+"px";
 38         div.innerText=t;
 39         document.body.appendChild(div);
 40     }
 41     function getAngle(x1,y1,x2,y2,x3,y3)
 42     {
 43         var cosfi=0,fi=0,norm=0;
 44         var x0=x2-x1;
 45         var y0=y2-y1;
 46         var x00=x3-x1;
 47         var y00=y3-y1;
 48         cosfi=x0*x00+y0*y00;
 49         norm=(x0*x0+y0*y0)*(x00*x00+y00*y00);
 50         cosfi/=Math.sqrt(norm);
 51         if(cosfi>=1.0)
 52         {
 53             return("0");
 54         }
 55         else if(cosfi<=-1.0)
 56         {
 57             return((Math.PI).toFixed(2));
 58         }
 59         fi=Math.acos(cosfi);
 60         if(180*fi/Math.PI<180)
 61         {
 62             return((180*fi/Math.PI).toFixed(2));
 63         }
 64         else
 65         {
 66             return((360-180*fi/Math.PI).toFixed(2));
 67         }
 68     }
 69     canvas.onclick=function(e)
 70     {        
 71 //        if(count==3)
 72 //        {
 73 //            ctx.clearRect(0,0,1000,1000);
 74 //        }
 75         if(!flag)
 76         {
 77             if(count==0)
 78             {
 79                 sx=e.pageX;
 80                 sy=e.pageY;
 81                 count++;
 82                 flag=!flag;
 83             }
 84             else if(count==1)
 85             {                
 86                 flag=!flag;
 87                 count++;
 88                 var text=getAngle(ox,oy,sx,sy,ex,ey)+"°";
 89                 creadiv(ox,oy,text);
 90             }
 91             
 92         }
 93         else
 94         {
 95             flag=!flag;
 96         }
 97     }    
 98     canvas.onmousemove=function(e){
 99         if(flag)
100         {
101             if(count==1)
102             {
103                 ctx.clearRect(0,0,1000,1000);
104                 draw(sx,sy,e.pageX,e.pageY);
105                 ox=e.pageX;
106                 oy=e.pageY;
107             }            
108         }
109         else if(count<2)
110         {
111             ctx.clearRect(0,0,1000,1000);
112             draw(sx,sy,ox,oy);
113             draw(ox,oy,e.pageX,e.pageY);
114             
115             ex=e.pageX;
116             ey=e.pageY;
117         }
118     }
119 }    
120 </script>
121 <style>
122     div{
123         color:red;
124         font-size:18pt;
125     }
126 </style>
127 </head>
128 <body onload="myfun();">
129     <canvas id="myCanvas" width="800" height="600" style="border:solid 1px 
130 
131 #CCC;">
132 您的浏览器不支持canvas，建议使用最新版的Chrome
133 </canvas>
134 </body>
135 </html>
View Code

绘制动态测量角对于绘制动态直线来说，多了一个端点，整个测量角有三个端点，即起点，中点和终点。整个测量角的绘制分为两个阶段，一是从起点到中点的绘制，在鼠标移动过程中，需要记录鼠标经过的位置，在鼠标未单击之前，所有鼠标经过的点需要通过clearRect()方法进行清除，保留最后鼠标点击时的那个点(这里通过flag值的判断)。当鼠标在中点处单击时，需要做两件事(1，单击时会进行清屏处理，此时根据之前记录的鼠标移动点，重新绘制一条同样的起点到中点的线段；2，记录鼠标移动的位置并实时清屏)。完成上述两件事后，再次单击鼠标，由于此时flag值为false;鼠标移动事件不再执行，由中点到终点的线段再次确定，至此，起点-中点-终点的测量角就绘制完成。同样此处进行了测量角的测量，可实时记录测量角的大小。

posted @ 2016-10-13 14:56  橄榄叶001  阅读(680)  评论(0)    收藏  举报