1 function DrawBoard(){ 2 this.oCanvas=document.getElementById("canvas"); 3 this.oCxt=this.oCanvas.getContext("2d"); 4 this.iCvsLeft=this.oCanvas.offsetLeft; 5 this.iCvsTop=this.oCanvas.offsetTop; 6 this.init(); 7 } 8 9 DrawBoard.prototype={ 10 constructor: DrawBoard, * 13 * 初始化各种方法 14 * init:function(){ .scroll(); .colorChoose(); 22 this.lineWidthChoose(); 23 this.shapeChoose(); 24 this.toolChoose(); .colorFn(); 28 this.lineWidthFn(); 29 this.shapeFn(); 30 this.toolFn(); 31 }, * 34 * 滚动条滚动后重新计算鼠标绘制位置 35 * scroll:function(){ 38 var _this=this; 39 document.onscroll=function(){ 40 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 41 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 42 _this.iCvsLeft=_this.oCanvas.offsetLeft - scrollLeft; 43 _this.iCvsTop=_this.oCanvas.offsetTop - scrollTop; 44 } 45 }, * 48 * 工具选择事件 49 * toolFn:function(){ 52 var _this=this; 53 var aTool=document.querySelector(".js-tool-lst").children; 54 for(var i=0;i<aTool.length;i++){ 55 aTool[i].onclick=function(){ 56 _this.toolChoose(this.getAttribute("data-tool")); 57 } 58 } 59 }, * 62 * 选择工具判断 63 * @param sTool toolChoose:function(sTool){ 66 if(sTool=="eraserAll"){ 67 this.clearRectAll(); 68 }else if(sTool=="eraser"){ 69 this.toolSwitch("pointer",sTool); 70 this.clearRect(); 71 } 72 }, * 75 * 形状选择事件 76 * shapeFn:function(){ 79 var _this=this; 80 var aShape=document.querySelector(".js-shape-lst").children; 81 for(var i=0;i<aShape.length;i++){ 82 aShape[i].onclick=function(){ 83 for(var j=0;j<aShape.length;j++){ 84 aShape[j].classList.remove("selected"); 85 } 86 this.classList.add("selected"); 87 _this.shapeChoose(this.getAttribute("data-tool")); 88 } 89 } 90 }, * 93 * 形状选择判断 94 * @param sShape shapeChoose:function(sShape){ 97 this.toolSwitch("crosshair",sShape); 98 if(sShape=="rect"){ 99 this.drawRect(); 100 }else if(sShape=="arc"){ 101 this.drawArc(); 102 }else{ 103 this.drawLine(); 104 } 105 }, * 108 * 颜色选择事件 109 * colorFn:function(){ 112 var _this=this; 113 var aColor=document.querySelector(".js-color-lst").children; 114 for(var i=0;i<aColor.length;i++){ 115 aColor[i].onclick=function(){ 116 for(var j=0;j<aColor.length;j++){ 117 aColor[j].classList.remove("selected"); 118 } 119 this.classList.add("selected"); 120 _this.colorChoose(this.getAttribute("data-color")); 121 } 122 } 123 }, * 126 * 颜色选择判断 127 * @param sColor colorChoose:function(sColor){ 130 this.sColor=sColor?sColor:"#000"; 131 this.oCxt.strokeStyle=this.sColor; 132 }, * 135 * 线条选择事件 136 * lineWidthFn:function(){ 139 var _this=this; 140 var aLineWidth=document.querySelector(".js-line-width-lst").children; 141 for(var i=0;i<aLineWidth.length;i++){ 142 aLineWidth[i].onclick=function(){ 143 for(var j=0;j<aLineWidth.length;j++){ 144 aLineWidth[j].classList.remove("selected"); 145 } 146 this.classList.add("selected"); 147 _this.lineWidthChoose(this.getAttribute("data-lineWidth")); 148 } 149 } 150 }, * 153 * 线条选择判断 154 * @param iLineWidth lineWidthChoose:function(iLineWidth){ 157 this.iLineWidth=iLineWidth?iLineWidth:1; 158 this.oCxt.lineWidth=this.iLineWidth; 159 }, * 162 * 创建虚拟canvas--绘制矩形和圆形时，鼠标按下创建，鼠标抬起移除 163 * virtualCanvasCreate:function(){ 166 var vCs=this.oCanvas.cloneNode(true); 167 vCs.id="virtualCanvas"; 168 vCs.style.background="transparent"; 169 vCs.style.boxShadow="none"; 170 vCs.style.position="absolute"; 171 vCs.style.left=this.oCanvas.offsetLeft+"px"; 172 vCs.style.top=this.oCanvas.offsetTop+"px"; 173 var vCxt=vCs.getContext("2d"); 174 document.querySelector("body").appendChild(vCs); 175 return { 176 vCanvas:vCs, 177 vCxt:vCxt 178 } 179 }, * 182 * 移除虚拟canvas 183 * virtualCanvasRemove:function(vCs){ 186 document.querySelector("body").removeChild(vCs); 187 }, * 190 * 绘制线条 191 * drawLine:function(){ 194 var _this=this; 195 this.oCanvas.onmousedown=function(event){ 196 var oEvent=event||window.event; 197 var startX=oEvent.clientX-_this.iCvsLeft; 198 var startY=oEvent.clientY-_this.iCvsTop; 199 var endX=startX; 200 var endY=startY; 201 202 _this.oCxt.beginPath(); 203 _this.oCxt.moveTo(startX,startY); 204 205 document.onmousemove=function(event){ 206 var oEvent=event||window.event; 207 endX=oEvent.clientX-_this.iCvsLeft; 208 endY=oEvent.clientY-_this.iCvsTop; 209 210 _this.oCxt.lineTo(endX,endY); 211 _this.oCxt.stroke(); ; 214 } 215 document.onmouseup=function(){ 216 document.onmousemove=null; 217 document.onmouseup=null; 218 } 219 } 220 }, * 223 * 绘制矩形 224 * drawRect:function(){ 227 var _this=this; 228 this.oCanvas.onmousedown=function(event){ 229 var oEvent=event||window.event; 230 var startX=oEvent.clientX-_this.iCvsLeft; 231 var startY=oEvent.clientY-_this.iCvsTop; 232 var endX=startX; 233 var endY=startY; virtualCanvas=_this.virtualCanvasCreate(); 236 virtualCanvas.vCxt.strokeStyle=_this.sColor; 237 virtualCanvas.vCxt.lineWidth=_this.iLineWidth; 238 var delta=0; 239 if(_this.iLineWidth%2==1){ 240 delta=.5; 241 } 242 243 document.onmousemove=function(event){ 244 var oEvent=event||window.event; 245 endX=oEvent.clientX-_this.iCvsLeft; 246 endY=oEvent.clientY-_this.iCvsTop; virtualCanvas.vCxt.strokeRect(startX+delta,startY+delta,endX-startX,endY-startY); ; 252 } 253 document.onmouseup=function(){ 254 if(endX-startX!=0&&endY-startY!=0){ } 257 _this.virtualCanvasRemove(virtualCanvas.vCanvas); 258 259 document.onmousemove=null; 260 document.onmouseup=null; 261 } 262 } 263 }, * 266 * 绘制圆形 267 * drawArc:function(){ 270 var _this=this; 271 this.oCanvas.onmousedown=function(event){ 272 var oEvent=event||window.event; 273 var startX=oEvent.clientX-_this.iCvsLeft; 274 var startY=oEvent.clientY-_this.iCvsTop; 275 var endX=startX; 276 var endY=startY; 277 var disX,disY,radius,coordsX,coordsY; virtualCanvas=_this.virtualCanvasCreate(); 280 virtualCanvas.vCxt.strokeStyle=_this.sColor; 281 virtualCanvas.vCxt.lineWidth=_this.iLineWidth; 282 283 document.onmousemove=function(event){ 284 var oEvent=event||window.event; 285 endX=oEvent.clientX-_this.iCvsLeft; 286 endY=oEvent.clientY-_this.iCvsTop; 287 disX=(endX-startX)/2; 288 disY=(endY-startY)/2; 289 radius=Math.min(Math.abs(disX),Math.abs(disY)); 290 coordsX=disX < 0 ? -radius : radius; 291 coordsY=disY < 0 ? -radius : radius; virtualCanvas.vCxt.beginPath(); virtualCanvas.vCxt.stroke(); ; 299 } 300 document.onmouseup=function(){ 301 if(endX-startX!=0&&endY-startY!=0){ 302 _this.oCxt.beginPath(); _this.oCxt.stroke(); 305 } 306 _this.virtualCanvasRemove(virtualCanvas.vCanvas); 307 308 document.onmousemove=null; 309 document.onmouseup=null; 310 } 311 } 312 }, * 315 * 工具切换后，鼠标样式的切换 316 * toolSwitch:function(sCursorStyle,sTool){ 319 this.oCanvas.style="cursor:"+sCursorStyle; 320 }, * 323 * 清楚画布 324 * clearRectAll:function(){ 327 this.oCxt.clearRect(0,0,this.oCanvas.width,this.oCanvas.height); 328 } 329 }