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

1. 绘制动态直线

``````1 1 <!--移动直线-->
2  2 <!DOCTYPE html>
3  3 <html>
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     {
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>
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()方法连接终点。仅需要两步，一个简单的直线就绘制好了。

2. 绘制动态测量角

``````1 <!--画测量角-->
2 <!DOCTYPE html>
3 <html>
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     }
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)+"°";
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>