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;鼠标移动事件不再执行，由中点到终点的线段再次确定，至此，起点-中点-终点的测量角就绘制完成。同样此处进行了测量角的测量，可实时记录测量角的大小。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
