使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

前言

需要用到图形绘制，没有找到完整的图形绘制实现，所以自己实现了一个 - -

一、实现的功能

1、基于oop思想构建，支持坐标点、线条（由坐标点组成，包含方向）、多边形（由多个坐标点组成）、圆形（包含圆心坐标点和半径）等实体

2、原生JavaScript实现，不依赖任何第三方js库和插件

3、多图形绘制（支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制）

4、拖拽式绘制（鼠标移动过程中不断进行canvas重绘）

5、图片绘制（作为背景图片时重绘会发生闪烁现象，暂时有点问题，后面继续完善）

5、清空绘制功能

6、新版本优化绘制性能（使用共享坐标变量数组，减少了大量的对象创建操作）

7、新版本支持箭头绘制功能

二、完整实现代码

1. DrawingTools =(function(){
2. //公共方法
3. var getDom=function(id){return document.getElementById(id)};
4. var isNull=function(s){return s==undefined||typeof(s)=='undefined'||s==null||s=='null'||s==''||s.length<1};
5. var hideDefRM=function(){document.oncontextmenu=function(){return false}};//屏蔽浏览器默认鼠标事件
6. /**绘图容器*/
7. var cbtCanvas;
8. /**绘图对象*/
9. var cxt;
10. /**绘制的图形列表*/
11. var shapes=new Array();
12. var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};
13. //背景图片绘制配置
14. var bgPictureConfig={
15. pic:null,//背景图片地址或路径
16. repaint:true,//是否作为永久背景图，每次清除时会进行重绘
17. };
18. //加载并绘制图片(src:图片路径或地址),默认重绘背景图
19. var loadPicture=function(src){
20. if(isNull(bgPictureConfig.repaint)||bgPictureConfig.repaint){bgPictureConfig.pic=src}
21. var img = new Image();
22. img.onload = function(){cxt.drawImage(img,0,0)}
23. img.src =src;
24. }
25. //绘图基础配置
26. var paintConfig={lineWidth:1,//线条宽度，默认1
27. strokeStyle:'red',//画笔颜色，默认红色
28. fillStyle:'red',//填充色
29. lineJoin:"round",//线条交角样式，默认圆角
30. lineCap:"round",//线条结束样式，默认圆角
31. };
32. //重新载入绘制样式
33. var resetStyle=function(){
34. cxt.strokeStyle=paintConfig.strokeStyle;
35. cxt.lineWidth=paintConfig.lineWidth;
36. cxt.lineJoin=paintConfig.lineJoin;
37. cxt.lineCap=paintConfig.lineCap;
38. cxt.fillStyle=paintConfig.fillStyle;
39. }
40. //鼠标图形
41. var cursors=['crosshair','pointer'];
42. /** 切换鼠标样式*/
43. var switchCorser=function(b){
44. cbtCanvas.style.cursor=((isNull(b)?isDrawing():b)?cursors[0]:cursors[1]);
45. }
46. //操作控制变量组
47. var ctrlConfig={
48. kind:0,//当前绘画分类
49. isPainting:false,//是否开始绘制
50. startPoint:null,//起始点
51. cuGraph:null,//当前绘制的图像
52. cuPoint:null,//当前临时坐标点，确定一个坐标点后重新构建
53. cuAngle:null,//当前箭头角度
54. vertex:[],//坐标点
55. }
56. /**获取当前坐标点*/
57. var getCuPoint=function(i){
58. return ctrlConfig.cuPoint[i];
59. }
60. /**设置当前坐标点*/
61. var setCuPoint=function(p,i){
62. return ctrlConfig.cuPoint[i]=p;
63. }
64. /**设置当前临时坐标点值*/
65. var setCuPointXY=function(x,y,i){
66. if(isNull(ctrlConfig.cuPoint)){
67. var arr=new Array();
68. arr[i]=new Point(x,y);
69. ctrlConfig.cuPoint=arr;
70. }else if(isNull(ctrlConfig.cuPoint[i])){
71. setCuPoint(new Point(x,y),i);
72. }else{
73. ctrlConfig.cuPoint[i].setXY(x,y);
74. }
75. return getCuPoint(i);
76. }
77. /**是否正在绘制*/
78. var isDrawing=function (){
79. return ctrlConfig.isPainting;
80. }
81. /**开始绘制状态*/
82. var beginDrawing=function(){
83. ctrlConfig.isPainting=true;
84. }
85. /**结束绘制状态*/
86. var stopDrawing=function(){
87. ctrlConfig.isPainting=false;
88. }
89. /**是否有开始坐标点*/
90. var hasStartPoint=function(){
91. return !isNull(ctrlConfig.startPoint);
92. }
93. /**设置当前绘制的图形*/
94. var setCuGraph=function(g){
95. ctrlConfig.cuGraph=g;
96. }
97. /**获取当前绘制的图形*/
98. var getCuGraph=function(){
99. return ctrlConfig.cuGraph;
100. }
101. /**设置开始坐标点（线条的起始点，三角形的顶点，圆形的圆心，四边形的左上角或右下角，多边形的起始点）*/
102. var setStartPoint=function(p){
103. ctrlConfig.startPoint=p;
104. }
105. /**获取开始坐标点*/
106. var getStartPoint=function(){
107. return ctrlConfig.startPoint;
108. }
109. /**清空全部*/
110. var clearAll=function(){
111. cxt.clearRect(0,0,cbtCanvas.width,cbtCanvas.height);
112. }
113. /**重绘*/
114. var repaint=function(){
115. clearAll();
116. /*
117. if(bgPictureConfig.repaint){
118. loadPicture(bgPictureConfig.pic);
119. }*/
120. }
121. /**点（坐标,绘图的基本要素,包含x,y坐标）*/
122. var Point=(function(x1,y1){
123. var x=x1,y=y1;
124. return{
125. set:function(p){
126. x=p.x,y=p.y;
127. },
128. setXY:function(x2,y2){
129. x=x2;y=y2;
130. },
131. setX:function(x3){
132. x=x3;
133. },
134. setY:function(y3){
135. y=y3;
136. },
137. getX:function(){
138. return x;
139. },
140. getY:function(){
141. return y;
142. }
143. }
144. });
145. /**多角形（三角形、矩形、多边形），由多个点组成*/
146. var Poly=(function(ps1){
147. var ps=isNull(ps1)?new Array():ps1;
148. var size=ps.length;
149. return{
150. set:function(ps2){
151. ps=ps2;
152. },
153. getSize:function(){
154. return size;
155. },
156. setPoint:function(p,i){
157. if(isNull(p)&&isNaN(i)){
158. return;
159. }
160. ps[i]=p;
161. },
162. setStart:function(p1){
163. if(isNull(ps)){
164. ps=new Array();
165. return ps.push(p1);
166. }else{
167. ps[0]=p1;
168. }
169. },
170. add:function(p){
171. if(isNull(ps)){
172. ps=new Array();
173. }
174. return ps.push(p);
175. },
176. pop:function(){
177. if(isNull(ps)){
178. return;
179. }
180. return ps.pop();
181. },
182. shift:function(){
183. if(isNull(ps)){
184. return;
185. }
186. return ps.shift;
187. },
188. get:function(){
189. if(isNull(ps)){
190. return null;
191. }
192. return ps;
193. },
194. draw:function(){
195. cxt.beginPath();
196. for(i in ps){
197. if(i==0){
198. cxt.moveTo(ps[i].getX(),ps[i].getY());
199. }else{
200. cxt.lineTo(ps[i].getX(),ps[i].getY());
201. }
202. }
203. cxt.closePath();
204. cxt.stroke();
205. }
206. }
207. });
208. /*线条(由两个点组成，包含方向)*/
209. var Line=(function(p1,p2,al){
210. var start=p1,end=p2,angle=al;
211. var drawLine=function(){
212. cxt.beginPath();
213. cxt.moveTo(p1.getX(),p1.getY());
214. cxt.lineTo(p2.getX(),p2.getY());
215. cxt.stroke();
216. }
217. //画箭头
218. var drawArrow=function() {
219. var vertex =ctrlConfig.vertex;
220. var x1=p1.getX(),y1=p1.getY(),x2=p2.getX(),y2=p2.getY();
221. var el=50,al=15;
222. //计算箭头底边两个点（开始点，结束点，两边角度，箭头角度）
223. vertex[0] = x1,vertex[1] = y1, vertex[6] = x2,vertex[7] = y2;
224. //计算起点坐标与X轴之间的夹角角度值
225. var angle = Math.atan2(y2 - y1, x2 - x1) / Math.PI * 180;
226. var x = x2 - x1,y = y2 - y1,length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
227. if (length < 250) {
228. el/=2,al/2;
229. }else if(length<500){
230. el*=length/500,al*=length/500;
231. }
232. vertex[8] = x2 - el * Math.cos(Math.PI / 180 * (angle + al));
233. vertex[9] = y2- el * Math.sin(Math.PI / 180 * (angle + al));
234. vertex[4] = x2- el* Math.cos(Math.PI / 180 * (angle - al));
235. vertex[5] = y2 - el * Math.sin(Math.PI / 180 * (angle - al));
236. //获取另外两个顶点坐标
237. x=(vertex[4]+vertex[8])/2,y=(vertex[5]+vertex[9])/2;
238. vertex[2] = (vertex[4] + x) / 2;
239. vertex[3] = (vertex[5] + y) / 2;
240. vertex[10] = (vertex[8] +x) / 2;
241. vertex[11] = (vertex[9] +y) / 2;
242. //计算完成,开始绘制
243. cxt.beginPath();
244. cxt.moveTo(vertex[0], vertex[1]);
245. cxt.lineTo(vertex[2], vertex[3]);
246. cxt.lineTo(vertex[4], vertex[5]);
247. cxt.lineTo(vertex[6], vertex[7]);
248. cxt.lineTo(vertex[8], vertex[9]);
249. cxt.lineTo(vertex[10], vertex[11]);
250. cxt.closePath();
251. cxt.fill();
252. cxt.stroke();
253. }
254. return{
255. setStart:function(s){
256. start=s;
257. },
258. setEnd:function(e){
259. end=e;
260. },
261. getStart:function(){
262. return start;
263. },
264. getEnd:function(){
265. return end;
266. },
267. draw:function(){
268. if(angle){
269. drawArrow();
270. }else{
271. drawLine();
272. }
273. }
274. }
275. });
276. /**圆形(包含圆心点和半径)*/
277. var Circle=(function(arr){
278. //包含起始点（圆心）和结束点,以及圆半径
279. var startPoint=arr.start,endPoint=arr.end,radius=arr.radius;
280. /*绘制圆*/
281. var drawCircle=function(){
282. cxt.beginPath();
283. var x=startPoint.getX();
284. var y=startPoint.getY();
285. if(isNull(radius)){
286. radius=calculateRadius(startPoint,endPoint);
287. }
288. //x,y,半径,开始点,结束点,顺时针/逆时针
289. cxt.arc(x,y,radius,0,Math.PI*2,false); // 绘制圆
290. cxt.stroke();
291. }
292. //计算圆半径
293. var calculateRadius=function(p1,p2){
294. var width=p2.getX()-p1.getX();
295. var height=p2.getY()-p1.getY();
296. //如果是负数
297. if(width<0||height<0){
298. width=Math.abs(width);
299. }
300. //计算两点距离=平方根(width^2+height^2)
301. c=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
302. return c;
303. }
304. return{
305. set:function(params){
306. startPoint=params.start;
307. endPoint=params.end;
308. radius=params.radius;
309. },
310. setPoint:function(p1){
311. p=p1;
312. },
313. getPoint:function(){
314. return p;
315. },
316. setRadius:function(r1){
317. radius=r1;
318. },
319. getRadius:function(){
320. return radius;
321. },
322. calcRadius:calculateRadius,
323. //绘制
324. draw:drawCircle,
325. }
326. });
327. /**绘制线条工具方法*/
328. var drawLine=function(p){
329. cxt.beginPath();
330. cxt.moveTo(startPosition.getX(),startPosition.getY());
331. cxt.lineTo(p.getX(),p.getY());
332. cxt.stroke();
333. }
334. /**绘制三角形工具方法*/
335. var drawTrian=function(ps){
336. cxt.beginPath();
337. var a=ps.get();
338. cxt.moveTo(a[0].getX(),a[0].getY());
339. cxt.lineTo(a[1].getX(),a[1].getY());
340. cxt.lineTo(a[2].getX(),a[2].getY());
341. cxt.closePath();
342. cxt.stroke();
343. }
344. /**绘制矩形工具方法*/
345. var drawRect=function(p2){
346. var p=getStartPoint();
347. var width=p.getX()-p2.getX();
348. var height=p.getY()-p2.getY();
349. cxt.beginPath();
350. cxt.strokeRect(x,y,width,height);//绘制矩形
351. }
352. /*绘制多边形工具方法*/
353. var drawpolygon=function(ps){
354. if(ps.length>1){//保证只有两个坐标点才是矩形
355. cxt.beginPath();
356. var p=ctrlConfig.startPoint;
357. var x=p.getX();
358. var y=p.getY();
359. cxt.moveTo(x,y);
360. for(p1 in ps){
361. cxt.lineTo(p1.getX(),p1.getY());
362. }
363. cxt.stroke();
364. }
365. }
366. /*绘制圆角矩形工具方法*/
367. var  drawRoundedRect=function(x,y,width,height,radius){
368. cxt.beginPath();
369. cxt.moveTo(x,y+radius);
370. cxt.lineTo(x,y+height-radius);
371. cxt.quadraticCurveTo(x,y+height,x+radius,y+height);
372. cxt.lineTo(x+width-radius,y+height);
373. cxt.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
374. cxt.lineTo(x+width,y+radius);
375. cxt.quadraticCurveTo(x+width,y,x+width-radius,y);
376. cxt.lineTo(x+radius,y);
377. cxt.quadraticCurveTo(x,y,x,y+radius);
378. cxt.stroke();
379. }
380. /*绘制圆工具方法*/
381. var drawCircle=function(c){
382. var p=c.getPoint();//坐标点
383. var x=p.getX();
384. var y=p.getY();
385. var r=c.getRadius();
386. cxt.beginPath();
387. //x,y,半径,开始点,结束点,顺时针/逆时针
388. cxt.arc(x,y,r,0,Math.PI*2,false); // 绘制圆
389. cxt.stroke();
390. }
391. //计算圆半径工具方法
392. var calculateRadius=function(p1,p2){
393. var width=p2.getX()-p1.getX();
394. var height=p2.getY()-p1.getY();
395. //如果是负数
396. if(width<0||height<0){
397. width=Math.abs(width);
398. }
399. //计算两点距离=平方根(width^2+height^2)
400. c=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
401. return c;
402. }
403. //鼠标按键点击（首次点击确定开始坐标点，拖动鼠标不断进行图形重绘）
404. var mouseDown = function(e){
405. var btnNum = e.button;
406. if(btnNum==0){
407. console.log("选择："+ctrlConfig.kind);
408. //设置起始点
409. switch(ctrlConfig.kind){
410. case graphkind.pen://画笔(不松开鼠标按键一直画)
411. beginDrawing();//开始绘制
412. cxt.beginPath();
413. cxt.moveTo(e.offsetX,e.offsetY);
414. break;
415. case graphkind.poly://多边形
416. var p=new Point(e.offsetX,e.offsetY);
417. if(isDrawing()){
418. getCuGraph().add(p);//添加到
419. }else{//第一次确定开始坐标
420. beginDrawing();//开始绘制
421. setStartPoint(p);
422. var poly=new Poly();
423. poly.add(p);
424. setCuGraph(poly);//设置当前绘制图形
425. }
426. break;
427. case graphkind.line://线条
428. case graphkind.arrow://方向
429. case graphkind.trian://三角形
430. case graphkind.rect://矩形
431. case graphkind.parallel://平行四边形
432. case graphkind.trapezoid://梯形
433. beginDrawing();//开始绘制
434. var p=new Point(e.offsetX,e.offsetY);
435. setStartPoint(p);
436. var poly=new Poly();
437. poly.add(p);
438. setCuGraph(poly);//设置当前绘制图形
439. break;
440. case graphkind.circle://圆
441. console.log("确定图形绘制开始坐标点："+e.offsetX+","+e.offsetY);//点击确定图形的开始坐标点
442. beginDrawing();//开始绘制
443. var p=new Point(e.offsetX,e.offsetY);
444. setStartPoint(p);
445. var circle= new Circle({'start':p});
446. setCuGraph(circle);
447. break;
448. case ctrlConfig.cursor: //手型鼠标
449. default://默认是手型鼠标，不允许绘制
450. }
451. }else if(btnNum==2){
452. console.log("右键由于结束多边形绘制");
453. if(isDrawing()){
454. if(ctrlConfig.kind==graphkind.poly){
455. repaint();
456. getCuGraph().draw();
457. stopDrawing();//结束绘制
458. }
459. }
460. }
461. hideDefRM();//屏蔽浏览器默认事件
462. }
463. //鼠标移动（拖动，根据鼠标移动的位置不断重绘图形）
464. var mouseMove = function(e){
465. if(isDrawing()&&hasStartPoint()){//检查是否开始绘制，检查是否有开始坐标点
466. //画笔不需要重绘
467. if(ctrlConfig.kind>1){
468. repaint();//重绘
469. }
470. var p=setCuPointXY(e.offsetX,e.offsetY,0);//设置共享的临时坐标点，用于防止重复创建对象
471. switch(ctrlConfig.kind){
472. case graphkind.pen://画笔(一直画)
473. cxt.lineTo(e.offsetX,e.offsetY);
474. cxt.stroke();
475. break;
476. case graphkind.poly://多边形
477. var poly=getCuGraph(poly);
478. var size=poly.getSize();
479. poly.setPoint(p,(size-1));
480. poly.draw();
481. break;
482. case graphkind.line://线条
483. var line=new Line(getStartPoint(),p,false);
484. ctrlConfig.cuGraph=line;
485. line.draw();
486. break;
487. case graphkind.arrow://方向
488. var line=new Line(getStartPoint(),p,true);
489. ctrlConfig.cuGraph=line;
490. line.draw();
491. break;
492. case graphkind.trian://三角形
493. var lu=getStartPoint();
494. var x2=p.getX();
495. var x1=lu.getX();
496. //三角形左边的点坐标计算方法:(x1-(x2-x1),y2)
497. var x3=x1-(x2-x1);
498. var l=setCuPointXY(x3,p.getY(),1);//设置共享的临时坐标点，用于防止重复创建对象
499. var poly=getCuGraph();//获取当前图形
500. poly.set([lu,p,l]);
501. poly.draw();//即时绘制
502. break;
503. case graphkind.parallel://平行四边形
504. var lu=getStartPoint();
505. var x3=p.getX();
506. var x1=lu.getX();
507. //平行四边形两个未知坐标点计算方法:(x1-(x3-x1),y3),(x1+(x3-x1),y1)
508. var x2=x3+(x3-x1);
509. var x4=x1-(x3-x1);
510. var ld=setCuPointXY(x2,lu.getY(),1);//设置共享的临时坐标点，用于防止重复创建对象
511. var ru=setCuPointXY(x4,p.getY(),2);//设置共享的临时坐标点，用于防止重复创建对象
512. var poly=getCuGraph();//获取当前图形
513. poly.set([lu,ru,p,ld]);
514. poly.draw();//即时绘制
515. break;
516. case graphkind.trapezoid://梯形
517. var lu=getStartPoint();
518. var x3=p.getX();
519. var x1=lu.getX();
520. //梯形两个未知坐标点计算方法:(x3-(x3-x1)/2,y1),(x1-(x3-x1)/2,y3)
521. var x2=x3-(x3-x1)/2;
522. var x4=x1-(x3-x1)/2;
523. var ld=setCuPointXY(x2,lu.getY(),1);
524. var ru=setCuPointXY(x4,p.getY(),2);
525. var poly=getCuGraph();
526. poly.set([lu,ru,p,ld]);
527. poly.draw();
528. break;
529. case graphkind.rect://矩形
530. var lu=getStartPoint();
531. //矩形右上角和左上角坐标计算方法
532. var ld=setCuPointXY(lu.getX(),p.getY(),1);
533. var ru=setCuPointXY(p.getX(),lu.getY(),2);
534. var poly=getCuGraph();
535. poly.set([lu,ru,p,ld]);
536. poly.draw();
537. break;
538. case graphkind.circle://圆
539. var circle=getCuGraph();//获取当前图形
540. circle.set({'start':getStartPoint(),'end':p});
541. circle.draw();//即时绘制
542. break;
543. }
544. }
545. }
546. //鼠标按键松开
547. var mouseUp = function(e){
548. if(isDrawing()){
549. //console.log("松开鼠标按键:"+e.offsetX+","+e.offsetY);
550. //画笔不需要重绘
551. if(ctrlConfig.kind>1){
552. repaint();
553. getCuGraph().draw();
554. }
555. if(ctrlConfig.kind!=graphkind.poly){//多边形绘制鼠标按键松开不结束绘制，多边形只有右键点击才能结束绘制
556. stopDrawing();//结束绘制
557. }
558. }
559. }
560. //鼠标移出
561. var mouseOut = function(e){
562. console.log("鼠标移出绘制区域"+e.offsetX+","+e.offsetY);
563. if(isDrawing()){
564. console.log("停止绘制");
565. if(ctrlConfig.kind>1){
566. repaint();
567. getCuGraph().draw();
568. }
569. stopDrawing();//停止绘制
570. }
571. }
572. return{
573. isNull:isNull,
574. getDom:getDom,
575. clear:function(){
576. stopDrawing();//停止绘制
577. repaint();
578. },
579. /**初始化*/
580. init:function(params){
581. cbtCanvas=getDom(params.id);
582. //浏览器是否支持Canvas
583. if (cbtCanvas.getContext){
584. /**绘图对象*/
585. cxt=cbtCanvas.getContext("2d");
586. cbtCanvas.onmousedown = mouseDown;
587. cbtCanvas.onmouseup = mouseUp;
588. cbtCanvas.onmousemove = mouseMove;
589. cbtCanvas.onmouseout = mouseOut;
590. resetStyle();//载入样式
591. return true;
592. }else{
593. return false;
594. }
595. },
596. /**设置背景图片*/
597. setBgPic:loadPicture,
598. /**选择图形类型*/
599. begin:function(k){
600. console.log("选择绘制图形："+k);
601. if(isNaN(k)){//如果不是数字，先转换为对应字符
602. ctrlConfig.kind=kind[k];
603. }else{
604. ctrlConfig.kind=k;
605. }
606. switchCorser(true);//切换鼠标样式
607. },
608. /*手型，并停止绘图*/
609. hand:function(){
610. ctrlConfig.kind=0;
611. stopDrawing();//停止绘制
612. switchCorser(false);//切换鼠标样式
613. }
614. }
615. })

三、使用方式

1、图形类型

0:鼠标，1:画笔，2:线条，3:三角形，4:矩形，5:多边形，6:圆形，21:箭头，41:平行四边形，42:梯形
var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};

2、初始化以及使用背景图片和画笔选择

1. var drawUtil=new DrawingTools();
2. //初始化，(如果浏览器不支持H5，会初始化失败，返回false)
3. if(drawUtil.init({'id':'calibrationCanvas'})){
4. //加载图片
5. var imgsrc='图片地址';
6. if(!drawUtil.isNull(imgsrc)){
7. drawUtil.setBgPic(imgsrc,true);//设置背景图片（异步加载图片）
8. }
9. }
10. drawUtil.begin(1);//选择画笔

2、绘制箭头

1. drawUtil.begin(21);

四、演示demo

点击这里跳转demo