版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、Canvas實(shí)現(xiàn)畫圖、虛線、輔助線、線條顏色、線條寬度，整合加強(qiáng)版使用Canvas實(shí)現(xiàn)畫圖程序。本次更新主要實(shí)現(xiàn)了一下功能：虛線實(shí)線的選擇、輔助線、線條顏色選擇、線條寬度選擇進(jìn)一步整理了下代碼，發(fā)現(xiàn)了不少很有用的寫法，具體看下面。效果截圖：源代碼：HTML代碼html view plaincopy1. <!docutype html> 2. <!-date 2014-12-28-> 3. <html> 4. <
2、head> 5. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6. <style type="text/css"> &
3、#160;7. canvas 8. background-color: rgb(247, 247, 247); 9.
4、 margin-top: 10px; 10. 11. </style> 12. </head>
5、; 13. <body> 14. <div class="controls"> 15. 線條類型<select id="lineTypeSelectBox"
6、> 16. <option value="solid">實(shí)線</option> 17. <option value="dashed">虛線</option>
7、; 18. </select> 19. 線條顏色<select id="strokeColorSelectBox"> 20.
8、60; <option value="black">black</option> 21. <option
9、0;value="red">red</option> 22. <option value="blue">blue</option> 23.
10、 </select> 24. 線條寬度<select id="lineWidthSelectBox"> 25.
11、0; <option value="1">1</option> 26. <option value="2">2</option> 27.
12、 <option value="4">4</option> 28. </select>
13、0; 29. 網(wǎng)格線<input id="gridCheckBox" type="checkbox" checked="checked" > 30.
14、60; 坐標(biāo)軸<input id="axesCheckBox" type="checkbox" checked="checked" > 31. 輔助線<input id="guideWiresCheck
15、Box" type="checkbox" checked="checked" > 32. <input type="button" value="清除畫布" id="eraseAllButton"> 33. &#
16、160; </div> 34. <!-canvas默認(rèn)大小300*150-> 35. <canvas id="canvas" width="800" height="500"
17、> 36. </canvas> 37. </body> 38. <!-導(dǎo)入繪制坐標(biāo)、網(wǎng)格的js文件-> 39. <script&
18、#160;type = "text/javascript" src ="mikuCanvasAxes.js"></script> 40. <!-導(dǎo)入繪制虛線的js文件-> 41. <script type = &quo
19、t;text/javascript" src ="mikuCanvasLine.js"></script> 42. <!-導(dǎo)入主要繪圖js文件-> 43. <!- 44.
20、 全局變量定義 45. 函數(shù)：窗口坐標(biāo)轉(zhuǎn)換為Canvas坐標(biāo)、保存還原當(dāng)前繪圖表面數(shù)據(jù)、橡皮筋法相關(guān)函數(shù)、繪制輔助線相關(guān)函數(shù)、初始化函數(shù) 46. 事件處理：鼠標(biāo)down,move,up事件、按鈕點(diǎn)擊事件、單選框
21、變化事件 47. -> 48. <script type = "text/javascript" src ="mikuCanvasPaintAppMain.js"></script> 49. </html>&#
22、160; 繪制坐標(biāo)軸與網(wǎng)格html view plaincopy1. <!docutype html> 2. <!-date 2014-12-28-> 3. <html> 4. <head> 5. <meta http-equiv="content-ty
23、pe" content="text/html; charset=utf-8" /> 6. <style type="text/css"> 7. canvas 8.
24、; 9. 10. </style> 11.
25、0; <script type = "text/javascript" src ="mikuCanvasAxes.js"></script> 12. </head> 13. <body> 14.
26、; <div class="controls"> 15. 網(wǎng)格線<input id="gridCheckBox" type="checkbox" checked="checked" > 16.
27、60; 坐標(biāo)軸<input id="axesCheckBox" type="checkbox" checked="checked" > 17. <input type="button&quo
28、t; value="清除畫布" id="eraseAllButton"> 18. </div> 19. <!-canvas默認(rèn)大小300*150-> 20.
29、;<canvas id="canvas" width="800" height="500"> 21. </canvas> 22. </body> 23. <script type="text
30、/javascript"> 24. /Vars- 25. var canvas =document.getElementById("canvas"), 26.
31、60; context =canvas.getContext("2d"), 27. /正在繪制的繪圖表面變量 28. drawingSurfaceImageData, 29.
32、60; /鼠標(biāo)按下相關(guān)對(duì)象 30. mousedown = , 31. /橡皮筋矩形對(duì)象 32.
33、; rubberbandRect = , 33. /拖動(dòng)標(biāo)識(shí)變量 34. dragging = false;&
34、#160; 35. /控制對(duì)象 36. var eraseAllButton = document.getElementById("eraseAllButton"), 37.
35、0; axesCheckBox = document.getElementById("axesCheckBox"), 38. /檢測(cè)axesCheckBox是否被選中 39. haveAxes =
36、axesCheckBox.checked; 40. var gridCheckBox = document.getElementById("gridCheckBox"); 41. var haveGrid = gridCheckBox.checked; 42.
37、 /Functions- 43. /將窗口坐標(biāo)轉(zhuǎn)換為Canvas坐標(biāo) 44. /傳入?yún)?shù)：窗口坐標(biāo)(x,y) 45. function win
38、dowToCanvas(x,y) 46. /獲取canvas元素的邊距對(duì)象 47. var bbox = canvas.getBoundingClientRect(); 48. &
39、#160; /返回一個(gè)坐標(biāo)對(duì)象 49. /類似json的一種寫法 50. return 51.
40、0; x : x - bbox.left*(canvas.width/bbox.width), 52. y&
41、#160;: y - bbox.top*(canvas.height/bbox.height) 53. 54. 55.
42、0;/保存當(dāng)前繪圖表面數(shù)據(jù) 56. function saveDrawingSurface() 57. /從上下文中獲取繪圖表面數(shù)據(jù) 58. drawingSurfaceImageData
43、 = context.getImageData(0,0,canvas.width,canvas.height); 59. 60. /還原當(dāng)前繪圖表面 61. function restoreDrawingSurfa
44、ce() 62. /將繪圖表面數(shù)據(jù)還原給上下文 63. context.putImageData(drawingSurfaceImageData,0,0); 64. 65.
45、 /橡皮筋相關(guān)函數(shù) 66. 67. /更新橡皮筋矩形+對(duì)角線 68. /傳入?yún)?shù)：坐標(biāo)對(duì)象loc 69.
46、; function updateRubberband(loc) 70. updateRubberbandRectangle(loc); 71. drawRubberbandShape(l
47、oc); 72. 73. /更新橡皮筋矩形 74. /傳入?yún)?shù)：坐標(biāo)對(duì)象loc 75. function updat
48、eRubberbandRectangle(loc) 76. /獲得矩形的寬 77. rubberbandRect.width = Math.abs(loc.x - mousedown.x); 78.
49、60; /獲得矩形的高 79. rubberbandRect.height = Math.abs(loc.y - mousedown.y); 80.
50、0; /獲得矩形頂點(diǎn)的位置(left,top) 81. /如果鼠標(biāo)按下的點(diǎn)（起點(diǎn)）在當(dāng)前點(diǎn)的的左側(cè) 82. /這里畫一下圖就懂了 83. &
51、#160; if(loc.x > mousedown.x) 84. rubberbandRect.left = mousedown.x; 85.
52、60; else 86. rubberbandRect.left = loc.x; 87. 88.
53、60; if(loc.y > mousedown.y) 89. rubberbandRect.top = mousedown.y; 90.
54、 else 91. rubberbandRect.top = loc.y; 92. 93. &
55、#160; 94. /繪制橡皮筋矩形的對(duì)角線 95. /傳入?yún)?shù)：坐標(biāo)對(duì)象loc 96. function drawRubberbandShape(loc)
56、0;97. /alert("draw"); 98. context.beginPath(); 99. c
57、ontext.moveTo(mousedown.x,mousedown.y); 100. context.lineTo(loc.x,loc.y); 101. context.stroke(); 102.
58、60; 103. /事件處理- 104. canvas.onmousedown = function(e) 105. var loc
59、 =windowToCanvas(e.clientX,e.clientY); 106. e.preventDefault(); 107. saveDrawingSurface(); 108.
60、0; mousedown.x = loc.x; 109. mousedown.y = loc.y; 110. dragging = true; 111.
61、 112. 113. canvas.onmousemove = function(e) 114. &#
62、160; var loc; 115. if(dragging) 116. e.preventDefault(); 117.
63、60; loc = windowToCanvas(e.clientX,e.clientY); 118. restoreDrawingSurface(); 119. &
64、#160; updateRubberband(loc); 120. 121. 122.
65、 canvas.onmouseup = function(e) 123. loc = windowToCanvas(e.clientX,e.clientY); 124. restoreDrawingSurf
66、ace(); 125. updateRubberband(loc); 126. dragging = false; 127. &#
67、160; 128. eraseAllButton.onclick = function(e) 129. context.clearRect(0,0,canvas.width,canvas.height); 130.
68、; initialization(); 131. saveDrawingSurface(); 132. 133. axesCh
69、eckBox.onchange = function(e) 134. haveAxes = axesCheckBox.checked; 135. initialization(); 136. &
70、#160; 137. gridCheckBox.onchange = function(e) 138. haveGrid = gridCheckBox.checked; 139. &
71、#160; initialization(); 140. 141. /Initialization- 142. f
72、unction initialization() 143. /清除畫布 144. context.clearRect(0,0,canvas.width,canvas.height); 145.
73、60; if(haveAxes) 146. drawAxes(context,40); 147. 148.
74、60; if(haveGrid) 149. drawGrid(context,10,10); 150.
75、; 151. 152. /入口 153. initialization(); 154. </script> 155. </html&g
76、t; 繪制網(wǎng)格與坐標(biāo)軸的js文件javascript view plaincopy1. /Classes- 2. function mikuLoc(locX,locY) 3. this.x = locX; 4. this.y = locY; 5. 6. /Contents- 7. var
77、 GRID_STYLE = "lightgray", 8. GRID_LINE_WIDTH = 0.5; 9. 10. var AXES_STYLE = "#a2a2a2", 11. AXES_LINE_WIDTH = 1, 1
78、2. VERTICAL_TICK_SPACING = 10, 13. HORIZONTAL_TIKE_SPACING = 10, 14. TICK_WIDTH = 10; 15. /Function- 16. /繪制網(wǎng)格 17. /傳入?yún)?shù)為：繪圖環(huán)境,x軸間隔，y軸間隔 &
79、#160;18. function drawGrid(context,stepx,stepy) 19. context.save(); 20. context.strokeStyle = GRID_STYLE; 21. /設(shè)置線寬為0.5 22. context.lineWidth
80、0; = GRID_LINE_WIDTH; 23. /繪制x軸網(wǎng)格 24. /注意：canvas在兩個(gè)像素的邊界處畫線 25. /由于定位機(jī)制，1px的線會(huì)變成2px 26. /于是要+0.5 27. for(var&
81、#160;i=stepx+0.5;i<context.canvas.width;i=i+stepx) 28. /開啟路徑 29. context.beginPath(); 30. context.moveTo(i,0);
82、0;31. context.lineTo(i,context.canvas.height); 32. context.stroke(); 33. 34.
83、60;/繪制y軸網(wǎng)格 35. for(var i=stepy+0.5;i<context.canvas.height;i=i+stepy) 36. context.beginPath(); 37. context.moveTo(0,i); 38.
84、0; context.lineTo(context.canvas.width,i); 39. context.stroke(); 40. 41. context.restore(); 42
85、. ; 43. /Function- 44. /繪制坐標(biāo)軸 45. /傳入?yún)?shù)為：繪圖環(huán)境,坐標(biāo)軸邊距 46. function drawAxes(context,axesMargin) 47. /保存樣式 48. context.save(); 49. var originLoc
86、 = new mikuLoc(axesMargin, context.canvas.height-axesMargin); 50. var axesW = context.canvas.width - (axesMargin*2), 51. axesH = context.canvas.h
87、eight - (axesMargin*2); 52. /設(shè)置坐標(biāo)繪圖樣式繪圖樣式 53. context.strokeStyle = AXES_STYLE; 54. context.lineWidth = AXES_LINE_WIDTH; 55.
88、 /繪制x,y軸 56. drawHorizontalAxis(); 57. drawVerticalAxis(); 58. drawVerticalAxisTicks(); 59. drawHorizontalAxisTicks(); 60. &#
89、160; /恢復(fù)樣式 61. context.restore(); 62. 63. /繪制x軸 64. function drawHorizontalAxis() 65.
90、0; context.beginPath(); 66. context.moveTo(originLoc.x, originLoc.y); 67. context.lineTo(originLoc.x + axesW, originLoc.y); 68.
91、 context.stroke(); 69. 70. /繪制y軸 71. function drawVerticalAxis() 72. context.beginPath();
92、73. context.moveTo(originLoc.x, originLoc.y); 74. context.lineTo(originLoc.x, originLoc.y - axesH); 75. context.st
93、roke(); 76. 77. /繪制垂直軸小標(biāo)標(biāo) 78. function drawVerticalAxisTicks() 79. var deltaX; 80. &
94、#160; /當(dāng)前垂直tick的y軸坐標(biāo) 81. var nowTickY =originLoc.y-VERTICAL_TICK_SPACING; 82. for(var i=1;i<=(axesH/VERTICAL_TICK_SPACING);i+) 83.
95、; if(i%5 = 0) 84. deltaX=TICK_WIDTH; 85.
96、else 86. deltaX=TICK_WIDTH/2; 87. 88.
97、 context.beginPath(); 89. /移動(dòng)到當(dāng)前的tick起點(diǎn) 90. context.moveTo(originLoc.x-deltaX,nowTickY);
98、;91. context.lineTo(originLoc.x+deltaX,nowTickY); 92. context.stroke(); 93.
99、0; nowTickY=nowTickY-VERTICAL_TICK_SPACING; 94. 95. 96. /繪制水平軸小標(biāo)標(biāo) 97. function drawHorizontalAxisTicks() 98
100、. var deltaY; 99. var nowTickX = originLoc.x+HORIZONTAL_TIKE_SPACING; 100. for(var i=1;i<=(axesW/HOR
101、IZONTAL_TIKE_SPACING);i+) 101. if(i%5 = 0) 102. deltaY = TICK_WIDTH; 103.
102、; else 104. deltaY = TICK_WIDTH/2; 105. &
103、#160; 106. context.beginPath(); 107. context.moveTo(nowTickX,originLoc.y+deltaY); 108.
104、 context.lineTo(nowTickX,originLoc.y-deltaY); 109. context.stroke(); 110. nowTick
105、X = nowTickX + HORIZONTAL_TIKE_SPACING; 111. 112. 113. ; 繪制虛線javascript view plaincopy1. /繪制虛線 2. /傳入?yún)?shù)：上下文，起點(diǎn)，終點(diǎn)，虛線間隔 3. function
106、;drawDashedLine(context,x1,y1,x2,y2,dashLength) 4. /運(yùn)用三元表達(dá)式實(shí)現(xiàn)默認(rèn)參數(shù) 5. dashLength = dashLength=undefined ? 5 : dashLength; 6.
107、; /水平長(zhǎng)度 7. var deltaX = x2 - x1; 8. /垂直長(zhǎng)度 9. var deltaY =&#
108、160;y2 - y1; 10. /虛線數(shù)量 11. var numDashed = Math.floor( 12. Math.sqrt(delta
109、X*deltaX+deltaY*deltaY)/dashLength 13. ); 14. /開始繪制 15. context.beginPath(); 16. &
110、#160; for(var i=0; i<numDashed;i+) 17. /這種寫法太強(qiáng)大了 18. /(deltaX/numDashed)是指虛線的長(zhǎng)度 19.
111、60; contexti%2=0 ? "moveTo":"lineTo"(x1+(deltaX/numDashed)*i,y1+(deltaY/numDashed)*i); 20. 21.
112、60; /要記得描線啊 22. context.stroke(); 23. /結(jié)束繪制 24. context.closePath(); 25. 主要繪圖代碼java
113、script view plaincopy1. /Vars- 2. var canvas =document.getElementById("canvas"), 3. context =canvas.getContext("2d"),&
114、#160; 4. /正在繪制的繪圖表面變量 5. drawingSurfaceImageData, 6. /鼠標(biāo)按
115、下相關(guān)對(duì)象 7. mousedown = , 8. /橡皮筋矩形對(duì)象 9. rub
116、berbandRect = , 10. /拖動(dòng)標(biāo)識(shí)變量 11. dragging = false; 12. &
117、#160; 13. /控件 14. /擦除畫布的控制 15. var eraseAllButton = document.getElementById("eraseAllButton");
118、0;16. /坐標(biāo)軸的控制 17. var axesCheckBox = document.getElementById("axesCheckBox"); 18. /網(wǎng)格線的控制 19.
119、0; var gridCheckBox = document.getElementById("gridCheckBox"); 20. /輔助線的控制 21. var guideWiresCheckBox =
120、60;document.getElementById("guideWiresCheckBox"); 22. /線條顏色的控制 23. var strokeColorSelectBox =document.getElementById("strokeColorSelectBox");
121、; 24. /線條樣式的控制 25. var lineTypeSelectBox = document.getElementById("lineTypeSelectBox"); 26. /線條寬度的控制
122、60; 27. var lineWidthSelectBox = document.getElementById("lineWidthSelectBox"); 28. /Functions- 29. /將窗口坐標(biāo)轉(zhuǎn)換為Canvas坐標(biāo) 30. &
123、#160; /傳入?yún)?shù)：窗口坐標(biāo)(x,y) 31. function windowToCanvas(x,y) 32. /獲取canvas元素的邊距對(duì)象 33.
124、60; var bbox = canvas.getBoundingClientRect(); 34. /返回一個(gè)坐標(biāo)對(duì)象 35. /類似json的一種寫法 3
125、6. return 37. x : x - bbox.left*(canvas.width/bbox.width), 3
126、8. y : y - bbox.top*(canvas.height/bbox.height) 39. &
127、#160; 40. 41. /保存當(dāng)前繪圖表面數(shù)據(jù) 42. function saveDrawingSurface() 43.
128、 /從上下文中獲取繪圖表面數(shù)據(jù) 44. drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height); 45. 46.
129、; /還原當(dāng)前繪圖表面 47. function restoreDrawingSurface() 48. /將繪圖表面數(shù)據(jù)還原給上下文 49. conte
130、xt.putImageData(drawingSurfaceImageData,0,0); 50. 51. /橡皮筋相關(guān)函數(shù) 52. 53.
131、60; /更新橡皮筋矩形+對(duì)角線 54. /傳入?yún)?shù)：坐標(biāo)對(duì)象loc 55. function updateRubberband(loc) 56. updateRubberban
132、dRectangle(loc); 57. drawRubberbandShape(loc); 58. 59. /更新橡皮筋矩形 60. &
133、#160; /傳入?yún)?shù)：坐標(biāo)對(duì)象loc 61. function updateRubberbandRectangle(loc) 62. /獲得矩形的寬 63.
134、60; rubberbandRect.width = Math.abs(loc.x - mousedown.x); 64. /獲得矩形的高 65. rubberbandR
135、ect.height = Math.abs(loc.y - mousedown.y); 66. /獲得矩形頂點(diǎn)的位置(left,top) 67. /如果鼠標(biāo)按下的點(diǎn)（起點(diǎn)）在當(dāng)前點(diǎn)的的左側(cè) 68.
136、0; /這里畫一下圖就懂了 69. if(loc.x > mousedown.x) 70.
137、0; rubberbandRect.left = mousedown.x; 71. else 72. rubberbandRect.left = loc.x;
138、 73. 74. if(loc.y > mousedown.y) 75.
139、 rubberbandRect.top = mousedown.y; 76. else 77. rubberbandRect.top =
140、0;loc.y; 78. 79. 80. /繪制橡皮筋矩形的對(duì)角線 81.
141、/傳入?yún)?shù)：坐標(biāo)對(duì)象loc 82. function drawRubberbandShape(loc) 83. /獲取當(dāng)前線條類型 84.
142、var lineType = lineTypeSelectBox.value; 85. /獲取當(dāng)前線條顏色 86. var lineColor = strokeColorSelectBox.value;
143、60; 87. /獲取當(dāng)前線條寬度 88. var lineWidth = lineWidthSelectBox.value; 89.
144、0; /有改變context畫筆屬性就要做畫筆保護(hù) 90. context.save(); 91. context.strokeStyle = lineColor; 92.
145、60; context.lineWidth = lineWidth; 93. if(lineType = "solid") 94.
146、60; /alert("draw"); 95. /注意重新開始路徑 96. context.beginPath(); 97. &#
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2023試用期合同協(xié)議書七篇
- 2025交通事故自行調(diào)解書協(xié)議書12篇
- 個(gè)人股權(quán)轉(zhuǎn)讓協(xié)議書七篇
- 個(gè)人土地轉(zhuǎn)租協(xié)議范本
- 關(guān)注細(xì)節(jié)的“管理新星”-記工程局勞動(dòng)模范經(jīng)管部部長(zhǎng)孫獻(xiàn)龍
- 跖疣病因介紹
- 四大名著之紅樓春趣經(jīng)典解讀2
- 2023-2024學(xué)年天津市河北區(qū)高二（上）期末語文試卷
- 2023年天津市靜海一中高考語文模擬試卷（一）
- 重慶2020-2024年中考英語5年真題回-教師版-專題02 完形填空
- 娛樂直播項(xiàng)目創(chuàng)業(yè)計(jì)劃書
- 滅火設(shè)備行業(yè)營銷策略方案
- 供應(yīng)商年度評(píng)價(jià)內(nèi)容及評(píng)分表
- 培訓(xùn)機(jī)構(gòu)入駐合作協(xié)議
- 小學(xué)學(xué)生養(yǎng)成教育評(píng)價(jià)表一二年級(jí)
- 武漢歷史遺跡課件
- 思想道德與法治智慧樹知到課后章節(jié)答案2023年下威海職業(yè)學(xué)院
- 赫爾《期權(quán)、期貨及其他衍生產(chǎn)品》（第9版）筆記和課后習(xí)題詳解答案
- 注塑機(jī)設(shè)備日常點(diǎn)檢表
- 宗教禮儀講解
- 丹東市振興區(qū)2023-2024學(xué)年數(shù)學(xué)三年級(jí)第一學(xué)期期末綜合測(cè)試模擬試題含答案
評(píng)論
0/150
提交評(píng)論