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

2022-09-20 14:04:27

前言

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

一、实现的功能

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

上一篇：matlab绘制二维图形


下一篇：「干货」面试官问我如何快速搜索10万个矩形？——我说RBush