原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

前言

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

演示地址：查看演示DEMO

新版本支持IE5+（你没看错，就是某软的IE浏览器）以上任意浏览器的Canvas绘图：http://blog.csdn.net/eguid_1/article/details/79310269

项目维护于github：https://github.com/eguid/graffitiCanvas

一、实现的功能

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

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

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

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

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

5、清空绘制功能

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

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

二、完整实现代码

DrawingTools =(function(){
	//公共方法

	var getDom=function(id){return document.getElementById(id)};
	var isNull=function(s){return s==undefined||typeof(s)=='undefined'||s==null||s=='null'||s==''||s.length1};
	var hideDefRM=function(){document.oncontextmenu=function(){return false}};//屏蔽浏览器默认鼠标事件

	/**绘图容器*/

	var cbtCanvas;
	/**绘图对象*/

	var cxt;
	/**绘制的图形列表*/

	var shapes=new Array();
 
	var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};
	//背景图片绘制配置

	var bgPictureConfig={
			pic:null,//背景图片地址或路径

			repaint:true,//是否作为永久背景图，每次清除时会进行重绘

	};
	//加载并绘制图片(src:图片路径或地址),默认重绘背景图

	var loadPicture=function(src){
		if(isNull(bgPictureConfig.repaint)||bgPictureConfig.repaint){bgPictureConfig.pic=src}
		var img = new Image();
	    img.onload = function(){cxt.drawImage(img,0,0)}
	    img.src =src;
	}
	
	//绘图基础配置

	var paintConfig={lineWidth:1,//线条宽度，默认1

				strokeStyle:'red',//画笔颜色，默认红色

				fillStyle:'red',//填充色

				lineJoin:"round",//线条交角样式，默认圆角

				lineCap:"round",//线条结束样式，默认圆角

		};
	//重新载入绘制样式

	var resetStyle=function(){
		cxt.strokeStyle=paintConfig.strokeStyle;
		cxt.lineWidth=paintConfig.lineWidth;
		cxt.lineJoin=paintConfig.lineJoin;
		cxt.lineCap=paintConfig.lineCap;
		cxt.fillStyle=paintConfig.fillStyle;
	}
	
	//鼠标图形

	var cursors=['crosshair','pointer'];
	/** 切换鼠标样式*/

	var switchCorser=function(b){
		cbtCanvas.style.cursor=((isNull(b)span class="hljs-title function_">isDrawing():b)ursors[0]:cursors[1]);
	}
	//操作控制变量组

	var ctrlConfig={
			kind:0,//当前绘画分类

			isPainting:false,//是否开始绘制

			startPoint:null,//起始点

			cuGraph:null,//当前绘制的图像

			cuPoint:null,//当前临时坐标点，确定一个坐标点后重新构建

			cuAngle:null,//当前箭头角度

			vertex:[],//坐标点

	}
	/**获取当前坐标点*/

	var getCuPoint=function(i){
		return ctrlConfig.cuPoint[i];
	}
	/**设置当前坐标点*/

	var setCuPoint=function(p,i){
		return ctrlConfig.cuPoint[i]=p;
	}
	/**设置当前临时坐标点值*/

	var setCuPointXY=function(x,y,i){
		if(isNull(ctrlConfig.cuPoint)){
			var arr=new Array();
			arr[i]=new Point(x,y);
			ctrlConfig.cuPoint=arr;
		}else if(isNull(ctrlConfig.cuPoint[i])){
			setCuPoint(new Point(x,y),i);
		}else{
			ctrlConfig.cuPoint[i].setXY(x,y);
		}
		return getCuPoint(i);
	}
	
	/**是否正在绘制*/

	var isDrawing=function (){
		return ctrlConfig.isPainting;
	}
	/**开始绘制状态*/

	var beginDrawing=function(){
		ctrlConfig.isPainting=true;
	}
	/**结束绘制状态*/

	var stopDrawing=function(){
		ctrlConfig.isPainting=false;
	}
	/**是否有开始坐标点*/

	var hasStartPoint=function(){
		return !isNull(ctrlConfig.startPoint);
	}
	/**设置当前绘制的图形*/

	var setCuGraph=function(g){
		 ctrlConfig.cuGraph=g;
	}
	/**获取当前绘制的图形*/

	var getCuGraph=function(){
		return ctrlConfig.cuGraph;
	}
	/**设置开始坐标点（线条的起始点，三角形的顶点，圆形的圆心，四边形的左上角或右下角，多边形的起始点）*/

	var setStartPoint=function(p){
		ctrlConfig.startPoint=p;
	}
	/**获取开始坐标点*/

	var getStartPoint=function(){
		return ctrlConfig.startPoint;
	}
	


                                                        
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！