Canvas版画图、虚线、辅助线、线条颜色、线条宽度,整合加强版.docx

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. red22. 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. context=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. /检测axesCheckBox是否被选中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. /返回一个坐标对象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. functionrestoreDrawingSurface()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. functionupdateRubberbandRectangle(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.left=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.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. 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=false;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. haveGrid=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. initialization();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,14. 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+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(context.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-(axesMargin*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. /绘制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.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=TICK_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. varnowTickX=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. context.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. vardeltaY=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=mousedown.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画笔属性就要做画笔保护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