Canvas版实现画图、虚线、辅助线、线条颜色、线条宽度

1、Canvas实现画图、虚线、辅助线、线条颜色、线条宽度，整合加强版使用Canvas实现画图程序。本次更新主要实现了一下功能：虚线实线的选择、辅助线、线条颜色选择、线条宽度选择进一步整理了下代码，发现了不少很有用的写法，具体看下面。效果截图：源代码：HTML代码htmlview plaincopy1. 2. 3. 4. 5. 6. 7. canvas8. background-color:rgb(247,247,247);9. margin-top:10px;10. 11. 12. 13. 14. 15. 线条类型16. 实线17. 虚线18. 19. 线条颜色20. black21. red2

2、2. blue23. 24. 线条宽度25. 126. 227. 428. 29. 网格线30. 坐标轴31. 辅助线32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 48. 49. 绘制坐标轴与网格htmlview plaincopy1. 2. 3. 4. 5. 6. 7. canvas8. 9. 10. 11. 12. 13. 14. 15. 网格线16. 坐标轴17. 18. 19. 20. 21. 22. 23. 24. /Vars-25. varcanvas=document.getElementById(canvas),26. cont

3、ext=canvas.getContext(2d),27. /正在绘制的绘图表面变量28. drawingSurfaceImageData,29. /鼠标按下相关对象30. mousedown=,31. /橡皮筋矩形对象32. rubberbandRect=,33. /拖动标识变量34. dragging=false;35. /控制对象36. vareraseAllButton=document.getElementById(eraseAllButton),37. axesCheckBox=document.getElementById(axesCheckBox),38. /检测axesChe

4、ckBox是否被选中39. haveAxes=axesCheckBox.checked;40. vargridCheckBox=document.getElementById(gridCheckBox);41. varhaveGrid=gridCheckBox.checked;42. /Functions-43. /将窗口坐标转换为Canvas坐标44. /传入参数：窗口坐标(x,y)45. functionwindowToCanvas(x,y)46. /获取canvas元素的边距对象47. varbbox=canvas.getBoundingClientRect();48. /返回一个坐标对

5、象49. /类似json的一种写法50. return51. x:x-bbox.left*(canvas.width/bbox.width),52. y:y-bbox.top*(canvas.height/bbox.height)53. ;54. 55. /保存当前绘图表面数据56. functionsaveDrawingSurface()57. /从上下文中获取绘图表面数据58. drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height);59. 60. /还原当前绘图表面61. functionr

6、estoreDrawingSurface()62. /将绘图表面数据还原给上下文63. context.putImageData(drawingSurfaceImageData,0,0);64. 65. /橡皮筋相关函数66. 67. /更新橡皮筋矩形+对角线68. /传入参数：坐标对象loc69. functionupdateRubberband(loc)70. updateRubberbandRectangle(loc);71. drawRubberbandShape(loc);72. 73. /更新橡皮筋矩形74. /传入参数：坐标对象loc75. functionupdateRubbe

7、rbandRectangle(loc)76. /获得矩形的宽77. rubberbandRect.width=Math.abs(loc.x-mousedown.x);78. /获得矩形的高79. rubberbandRect.height=Math.abs(loc.y-mousedown.y);80. /获得矩形顶点的位置(left,top)81. /如果鼠标按下的点（起点）在当前点的的左侧82. /这里画一下图就懂了83. if(loc.xmousedown.x)84. rubberbandRect.left=mousedown.x;85. else86. rubberbandRect.le

8、ft=loc.x;87. 88. if(loc.ymousedown.y)89. rubberbandRect.top=mousedown.y;90. else91. rubberbandRect.top=loc.y;92. 93. 94. /绘制橡皮筋矩形的对角线95. /传入参数：坐标对象loc96. functiondrawRubberbandShape(loc)97. /alert(draw);98. context.beginPath();99. context.moveTo(mousedown.x,mousedown.y);100. context.lineTo(loc.x,loc

9、.y);101. context.stroke();102. 103. /事件处理-104. canvas.onmousedown=function(e)105. varloc=windowToCanvas(e.clientX,e.clientY);106. e.preventDefault();107. saveDrawingSurface();108. mousedown.x=loc.x;109. mousedown.y=loc.y;110. dragging=true;111. 112. 113. canvas.onmousemove=function(e)114. varloc;115

10、. if(dragging)116. e.preventDefault();117. loc=windowToCanvas(e.clientX,e.clientY);118. restoreDrawingSurface();119. updateRubberband(loc);120. 121. 122. canvas.onmouseup=function(e)123. loc=windowToCanvas(e.clientX,e.clientY);124. restoreDrawingSurface();125. updateRubberband(loc);126. dragging=fal

11、se;127. 128. eraseAllButton.onclick=function(e)129. context.clearRect(0,0,canvas.width,canvas.height);130. initialization();131. saveDrawingSurface();132. 133. axesCheckBox.onchange=function(e)134. haveAxes=axesCheckBox.checked;135. initialization();136. 137. gridCheckBox.onchange=function(e)138. ha

12、veGrid=gridCheckBox.checked;139. initialization();140. 141. /Initialization-142. functioninitialization()143. /清除画布144. context.clearRect(0,0,canvas.width,canvas.height);145. if(haveAxes)146. drawAxes(context,40);147. 148. if(haveGrid)149. drawGrid(context,10,10);150. 151. 152. /入口153. initializatio

13、n();154. 155. 绘制网格与坐标轴的js文件javascriptview plaincopy1. /Classes-2. functionmikuLoc(locX,locY)3. this.x=locX;4. this.y=locY;5. 6. /Contents-7. varGRID_STYLE=lightgray,8. GRID_LINE_WIDTH=0.5;9. 10. varAXES_STYLE=#a2a2a2,11. AXES_LINE_WIDTH=1,12. VERTICAL_TICK_SPACING=10,13. HORIZONTAL_TIKE_SPACING=10,1

14、4. TICK_WIDTH=10;15. /Function-16. /绘制网格17. /传入参数为：绘图环境,x轴间隔，y轴间隔18. functiondrawGrid(context,stepx,stepy)19. context.save();20. context.strokeStyle=GRID_STYLE;21. /设置线宽为0.522. context.lineWidth=GRID_LINE_WIDTH;23. /绘制x轴网格24. /注意：canvas在两个像素的边界处画线25. /由于定位机制，1px的线会变成2px26. /于是要+0.527. for(vari=stepx

15、+0.5;icontext.canvas.width;i=i+stepx)28. /开启路径29. context.beginPath();30. context.moveTo(i,0);31. context.lineTo(i,context.canvas.height);32. context.stroke();33. 34. /绘制y轴网格35. for(vari=stepy+0.5;icontext.canvas.height;i=i+stepy)36. context.beginPath();37. context.moveTo(0,i);38. context.lineTo(con

16、text.canvas.width,i);39. context.stroke();40. 41. context.restore();42. ;43. /Function-44. /绘制坐标轴45. /传入参数为：绘图环境,坐标轴边距46. functiondrawAxes(context,axesMargin)47. /保存样式48. context.save();49. varoriginLoc=newmikuLoc(axesMargin,context.canvas.height-axesMargin);50. varaxesW=context.canvas.width-(axesMa

17、rgin*2),51. axesH=context.canvas.height-(axesMargin*2);52. /设置坐标绘图样式绘图样式53. context.strokeStyle=AXES_STYLE;54. context.lineWidth=AXES_LINE_WIDTH;55. /绘制x,y轴56. drawHorizontalAxis();57. drawVerticalAxis();58. drawVerticalAxisTicks();59. drawHorizontalAxisTicks();60. /恢复样式61. context.restore();62. 63.

18、 /绘制x轴64. functiondrawHorizontalAxis()65. context.beginPath();66. context.moveTo(originLoc.x,originLoc.y);67. context.lineTo(originLoc.x+axesW,originLoc.y);68. context.stroke();69. 70. /绘制y轴71. functiondrawVerticalAxis()72. context.beginPath();73. context.moveTo(originLoc.x,originLoc.y);74. context.

19、lineTo(originLoc.x,originLoc.y-axesH);75. context.stroke();76. 77. /绘制垂直轴小标标78. functiondrawVerticalAxisTicks()79. vardeltaX;80. /当前垂直tick的y轴坐标81. varnowTickY=originLoc.y-VERTICAL_TICK_SPACING;82. for(vari=1;i=(axesH/VERTICAL_TICK_SPACING);i+)83. if(i%5=0)84. deltaX=TICK_WIDTH;85. else86. deltaX=TIC

20、K_WIDTH/2;87. 88. context.beginPath();89. /移动到当前的tick起点90. context.moveTo(originLoc.x-deltaX,nowTickY);91. context.lineTo(originLoc.x+deltaX,nowTickY);92. context.stroke();93. nowTickY=nowTickY-VERTICAL_TICK_SPACING;94. 95. 96. /绘制水平轴小标标97. functiondrawHorizontalAxisTicks()98. vardeltaY;99. varnowTi

21、ckX=originLoc.x+HORIZONTAL_TIKE_SPACING;100. for(vari=1;i=(axesW/HORIZONTAL_TIKE_SPACING);i+)101. if(i%5=0)102. deltaY=TICK_WIDTH;103. else104. deltaY=TICK_WIDTH/2;105. 106. context.beginPath();107. context.moveTo(nowTickX,originLoc.y+deltaY);108. context.lineTo(nowTickX,originLoc.y-deltaY);109. con

22、text.stroke();110. nowTickX=nowTickX+HORIZONTAL_TIKE_SPACING;111. 112. 113. ;绘制虚线javascriptview plaincopy1. /绘制虚线2. /传入参数：上下文，起点，终点，虚线间隔3. functiondrawDashedLine(context,x1,y1,x2,y2,dashLength)4. /运用三元表达式实现默认参数5. dashLength=dashLength=undefined?5:dashLength;6. /水平长度7. vardeltaX=x2-x1;8. /垂直长度9. vard

23、eltaY=y2-y1;10. /虚线数量11. varnumDashed=Math.floor(12. Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength13. );14. /开始绘制15. context.beginPath();16. for(vari=0;imousedown.x)70. rubberbandRect.left=mousedown.x;71. else72. rubberbandRect.left=loc.x;73. 74. if(loc.ymousedown.y)75. rubberbandRect.top=moused

24、own.y;76. else77. rubberbandRect.top=loc.y;78. 79. 80. /绘制橡皮筋矩形的对角线81. /传入参数：坐标对象loc82. functiondrawRubberbandShape(loc)83. /获取当前线条类型84. varlineType=lineTypeSelectBox.value;85. /获取当前线条颜色86. varlineColor=strokeColorSelectBox.value;87. /获取当前线条宽度88. varlineWidth=lineWidthSelectBox.value;89. /有改变context

25、画笔属性就要做画笔保护90. context.save();91. context.strokeStyle=lineColor;92. context.lineWidth=lineWidth;93. if(lineType=solid)94. /alert(draw);95. /注意重新开始路径96. context.beginPath();97. context.moveTo(mousedown.x,mousedown.y);98. /这里可以更改成画虚线99. context.lineTo(loc.x,loc.y);100. context.stroke();101. elseif(lineType=dashed)102. drawDashedLine(context,mousedown.x,mousedown.y,loc.x,loc.y);103. 104. context.restore();105. 106