版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、Canvas实现画图、虚线、辅助线、线条颜色、线条宽度，整合加强版使用Canvas实现画图程序。本次更新主要实现了一下功能：虚线实线的选择、辅助线、线条颜色选择、线条宽度选择进一步整理了下代码，发现了不少很有用的写法，具体看下面。效果截图：源代码：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">实线</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. 网格线<input id="gridCheckBox" type="checkbox" checked="checked" > 30.
14、60; 坐标轴<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默认大小300*150-> 35. <canvas id="canvas" width="800" height="500"
17、> 36. </canvas> 37. </body> 38. <!-导入绘制坐标、网格的js文件-> 39. <script&
18、#160;type = "text/javascript" src ="mikuCanvasAxes.js"></script> 40. <!-导入绘制虚线的js文件-> 41. <script type = &quo
19、t;text/javascript" src ="mikuCanvasLine.js"></script> 42. <!-导入主要绘图js文件-> 43. <!- 44.
20、 全局变量定义 45. 函数：窗口坐标转换为Canvas坐标、保存还原当前绘图表面数据、橡皮筋法相关函数、绘制辅助线相关函数、初始化函数 46. 事件处理：鼠标down,move,up事件、按钮点击事件、单选框
21、变化事件 47. -> 48. <script type = "text/javascript" src ="mikuCanvasPaintAppMain.js"></script> 49. </html>&#
22、160; 绘制坐标轴与网格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. 网格线<input id="gridCheckBox" type="checkbox" checked="checked" > 16.
27、60; 坐标轴<input id="axesCheckBox" type="checkbox" checked="checked" > 17. <input type="button&quo
28、t; value="清除画布" id="eraseAllButton"> 18. </div> 19. <!-canvas默认大小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; /鼠标按下相关对象 30. mousedown = , 31. /橡皮筋矩形对象 32.
33、; rubberbandRect = , 33. /拖动标识变量 34. dragging = false;&
34、#160; 35. /控制对象 36. var eraseAllButton = document.getElementById("eraseAllButton"), 37.
35、0; axesCheckBox = document.getElementById("axesCheckBox"), 38. /检测axesCheckBox是否被选中 39. haveAxes =
36、axesCheckBox.checked; 40. var gridCheckBox = document.getElementById("gridCheckBox"); 41. var haveGrid = gridCheckBox.checked; 42.
37、 /Functions- 43. /将窗口坐标转换为Canvas坐标 44. /传入参数：窗口坐标(x,y) 45. function win
38、dowToCanvas(x,y) 46. /获取canvas元素的边距对象 47. var bbox = canvas.getBoundingClientRect(); 48. &
39、#160; /返回一个坐标对象 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;/保存当前绘图表面数据 56. function saveDrawingSurface() 57. /从上下文中获取绘图表面数据 58. drawingSurfaceImageData
43、 = context.getImageData(0,0,canvas.width,canvas.height); 59. 60. /还原当前绘图表面 61. function restoreDrawingSurfa
44、ce() 62. /将绘图表面数据还原给上下文 63. context.putImageData(drawingSurfaceImageData,0,0); 64. 65.
45、 /橡皮筋相关函数 66. 67. /更新橡皮筋矩形+对角线 68. /传入参数：坐标对象loc 69.
46、; function updateRubberband(loc) 70. updateRubberbandRectangle(loc); 71. drawRubberbandShape(l
47、oc); 72. 73. /更新橡皮筋矩形 74. /传入参数：坐标对象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; /获得矩形顶点的位置(left,top) 81. /如果鼠标按下的点（起点）在当前点的的左侧 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. /绘制橡皮筋矩形的对角线 95. /传入参数：坐标对象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; 绘制网格与坐标轴的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. /绘制网格 17. /传入参数为：绘图环境,x轴间隔，y轴间隔 &
79、#160;18. function drawGrid(context,stepx,stepy) 19. context.save(); 20. context.strokeStyle = GRID_STYLE; 21. /设置线宽为0.5 22. context.lineWidth
80、0; = GRID_LINE_WIDTH; 23. /绘制x轴网格 24. /注意：canvas在两个像素的边界处画线 25. /由于定位机制，1px的线会变成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轴网格 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. /绘制坐标轴 45. /传入参数为：绘图环境,坐标轴边距 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. /设置坐标绘图样式绘图样式 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; /恢复样式 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. /绘制垂直轴小标标 78. function drawVerticalAxisTicks() 79. var deltaX; 80. &
94、#160; /当前垂直tick的y轴坐标 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. /移动到当前的tick起点 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. /绘制水平轴小标标 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. /传入参数：上下文，起点，终点，虚线间隔 3. function
106、;drawDashedLine(context,x1,y1,x2,y2,dashLength) 4. /运用三元表达式实现默认参数 5. dashLength = dashLength=undefined ? 5 : dashLength; 6.
107、; /水平长度 7. var deltaX = x2 - x1; 8. /垂直长度 9. var deltaY =&#
108、160;y2 - y1; 10. /虚线数量 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. /这种写法太强大了 18. /(deltaX/numDashed)是指虚线的长度 19.
111、60; contexti%2=0 ? "moveTo":"lineTo"(x1+(deltaX/numDashed)*i,y1+(deltaY/numDashed)*i); 20. 21.
112、60; /要记得描线啊 22. context.stroke(); 23. /结束绘制 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. /鼠标按
115、下相关对象 7. mousedown = , 8. /橡皮筋矩形对象 9. rub
116、berbandRect = , 10. /拖动标识变量 11. dragging = false; 12. &
117、#160; 13. /控件 14. /擦除画布的控制 15. var eraseAllButton = document.getElementById("eraseAllButton");
118、0;16. /坐标轴的控制 17. var axesCheckBox = document.getElementById("axesCheckBox"); 18. /网格线的控制 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. /将窗口坐标转换为Canvas坐标 30. &
123、#160; /传入参数：窗口坐标(x,y) 31. function windowToCanvas(x,y) 32. /获取canvas元素的边距对象 33.
124、60; var bbox = canvas.getBoundingClientRect(); 34. /返回一个坐标对象 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. /保存当前绘图表面数据 42. function saveDrawingSurface() 43.
128、 /从上下文中获取绘图表面数据 44. drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height); 45. 46.
129、; /还原当前绘图表面 47. function restoreDrawingSurface() 48. /将绘图表面数据还原给上下文 49. conte
130、xt.putImageData(drawingSurfaceImageData,0,0); 50. 51. /橡皮筋相关函数 52. 53.
131、60; /更新橡皮筋矩形+对角线 54. /传入参数：坐标对象loc 55. function updateRubberband(loc) 56. updateRubberban
132、dRectangle(loc); 57. drawRubberbandShape(loc); 58. 59. /更新橡皮筋矩形 60. &
133、#160; /传入参数：坐标对象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. /获得矩形顶点的位置(left,top) 67. /如果鼠标按下的点（起点）在当前点的的左侧 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. /绘制橡皮筋矩形的对角线 81.
141、/传入参数：坐标对象loc 82. function drawRubberbandShape(loc) 83. /获取当前线条类型 84.
142、var lineType = lineTypeSelectBox.value; 85. /获取当前线条颜色 86. var lineColor = strokeColorSelectBox.value;
143、60; 87. /获取当前线条宽度 88. var lineWidth = lineWidthSelectBox.value; 89.
144、0; /有改变context画笔属性就要做画笔保护 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等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 四大名著之红楼春趣经典解读2
- 2023年整体家居项目融资计划书
- 2023年钨合金项目筹资方案
- 《SBU人力资源评估》课件
- 《个性时尚》课件
- 内蒙古包头市东河区2024届九年级上学期期末考试数学试卷(含答案)
- 养老院老人康复设施维修人员行为规范制度
- 《票据行为》课件
- 《个人电子银行介绍》课件
- 护理派遣合同
- 30道医院妇产科医生岗位高频面试问题附考察点及参考回答
- 2022年燕山大学招聘工作人员考试真题
- 娱乐直播项目创业计划书
- 供应商年度评价内容及评分表
- 剪刀式升降车专项施工方案
- 培训机构入驻合作协议
- 小学学生养成教育评价表一二年级
- 武汉历史遗迹课件
- 思想道德与法治智慧树知到课后章节答案2023年下威海职业学院
- 赫尔《期权、期货及其他衍生产品》（第9版）笔记和课后习题详解答案
- 注塑机设备日常点检表
评论
0/150
提交评论