Canvas版實現(xiàn)畫圖、虛線、輔助線、線條顏色、線條寬度

1、Canvas實現(xiàn)畫圖、虛線、輔助線、線條顏色、線條寬度，整合加強版使用Canvas實現(xiàn)畫圖程序。本次更新主要實現(xiàn)了一下功能：虛線實線的選擇、輔助線、線條顏色選擇、線條寬度選擇進一步整理了下代碼，發(fā)現(xiàn)了不少很有用的寫法，具體看下面。效果截圖：源代碼：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. 網(wǎng)格線30. 坐標(biāo)軸31. 輔助線32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 48. 49. 繪制坐標(biāo)軸與網(wǎng)格htmlview plaincopy1. 2. 3. 4. 5. 6. 7. canvas8. 9. 10. 11. 12. 13. 14. 15. 網(wǎng)格線16. 坐標(biāo)軸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. /鼠標(biāo)按下相關(guān)對象30. mousedown=,31. /橡皮筋矩形對象32. rubberbandRect=,33. /拖動標(biāo)識變量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. /將窗口坐標(biāo)轉(zhuǎn)換為Canvas坐標(biāo)44. /傳入?yún)?shù)：窗口坐標(biāo)(x,y)45. functionwindowToCanvas(x,y)46. /獲取canvas元素的邊距對象47. varbbox=canvas.getBoundingClientRect();48. /返回一個坐標(biāo)對

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. /保存當(dāng)前繪圖表面數(shù)據(jù)56. functionsaveDrawingSurface()57. /從上下文中獲取繪圖表面數(shù)據(jù)58. drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height);59. 60. /還原當(dāng)前繪圖表面61. functionr

6、estoreDrawingSurface()62. /將繪圖表面數(shù)據(jù)還原給上下文63. context.putImageData(drawingSurfaceImageData,0,0);64. 65. /橡皮筋相關(guān)函數(shù)66. 67. /更新橡皮筋矩形+對角線68. /傳入?yún)?shù)：坐標(biāo)對象loc69. functionupdateRubberband(loc)70. updateRubberbandRectangle(loc);71. drawRubberbandShape(loc);72. 73. /更新橡皮筋矩形74. /傳入?yún)?shù)：坐標(biāo)對象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. /如果鼠標(biāo)按下的點（起點）在當(dāng)前點的的左側(cè)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. /傳入?yún)?shù)：坐標(biāo)對象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. 繪制網(wǎng)格與坐標(biāo)軸的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. /繪制網(wǎng)格17. /傳入?yún)?shù)為：繪圖環(huán)境,x軸間隔，y軸間隔18. functiondrawGrid(context,stepx,stepy)19. context.save();20. context.strokeStyle=GRID_STYLE;21. /設(shè)置線寬為0.522. context.lineWidth=GRID_LINE_WIDTH;23. /繪制x軸網(wǎng)格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軸網(wǎng)格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. /繪制坐標(biāo)軸45. /傳入?yún)?shù)為：繪圖環(huán)境,坐標(biāo)軸邊距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. /設(shè)置坐標(biāo)繪圖樣式繪圖樣式53. context.strokeStyle=AXES_STYLE;54. context.lineWidth=AXES_LINE_WIDTH;55. /繪制x,y軸56. drawHorizontalAxis();57. drawVerticalAxis();58. drawVerticalAxisTicks();59. drawHorizontalAxisTicks();60. /恢復(fù)樣式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. /繪制垂直軸小標(biāo)標(biāo)78. functiondrawVerticalAxisTicks()79. vardeltaX;80. /當(dāng)前垂直tick的y軸坐標(biāo)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. /移動到當(dāng)前的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. /繪制水平軸小標(biāo)標(biāo)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. /傳入?yún)?shù)：上下文，起點，終點，虛線間隔3. functiondrawDashedLine(context,x1,y1,x2,y2,dashLength)4. /運用三元表達(dá)式實現(xiàn)默認(rèn)參數(shù)5. dashLength=dashLength=undefined?5:dashLength;6. /水平長度7. vardeltaX=x2-x1;8. /垂直長度9. vard

23、eltaY=y2-y1;10. /虛線數(shù)量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. /傳入?yún)?shù)：坐標(biāo)對象loc82. functiondrawRubberbandShape(loc)83. /獲取當(dāng)前線條類型84. varlineType=lineTypeSelectBox.value;85. /獲取當(dāng)前線條顏色86. varlineColor=strokeColorSelectBox.value;87. /獲取當(dāng)前線條寬度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