canvas版实现画图、虚线、辅助线、线条颜色、线条宽度.doc_H5之家

文档介绍：
Canvas版实现画图、虚线、辅助线、线条颜色、线条宽度
Canvas实现画图、虚线、辅助线、线条颜色、线条宽度,整合加强
版
使用Canvas实现画图程序。
本次更新主要实现了一下功能:
虚线实线的选择、辅助线、线条颜色选择、线条宽度选择
进一步整理了下代码,发现了不少很有用的写法,具体看下面。
效果截图:
源代码:
①HTML代码
[html] view plaincopy
1. <!docutype html>
2. 
3. <html>
4. <head>
5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6. <style type="text/css">
7. canvas{
8. background-color: rgb(247, 247, 247);
9. margin-top: 10px;
10. }
11. </style>
12. </head>
13. <body>
14. <div class="controls">
15. 线条类型<select id="ypeSelectBox">
16. <option value="solid">实线</option>
17. <option value="dashed">虚线</option>
18. </select>
19. 线条颜色<select id="strokeColorSelectBox">
20. <option value="black">black</option>
21. <option value="red">red</option>
22. <option value="blue">blue</option>
23. </select>
24. 线条宽度<select id="lineWidthSelectBox">
25. <option value="1">1</option>
26. <option value="2">2</option>
27. <option value="4">4</option>
28. </select>
29. 网格线<input id="gridCheckBox" type="checkbox" checked="checked" >
30. 坐标轴<input id="axesCheckBox" type="checkbox" checked="checked" >
31. 辅助线
<input id="guideWiresCheckBox" type="checkbox" checked="checked" >
32. <input type="button" value="清除画布" id="eraseAllButton">
33. </div>
34. 
35. <canvas id="canvas" width="800" height="500">
36. </canvas>
37. </body>
38. 
39. <script type = "text/javascript" src ="mikuCanvasAxes.js"></script>
40. 
41. <script type = "text/javascript" src ="mikuCanvasLine.js"></script>
42. 
43. 
48. <script type = "text/javascript" src ="mikuCanvasPaintAppMain.js"></script>
49. </html>
②绘制坐标轴与网格
[html] 1. <!docutype html>
2. 
3. <html>
4. <head>
5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6. <style type="text/css">
7. canvas{
8.
9. }
10. </style>
11. <script type = "text/javascript" src ="mikuCanvasAxes.js"></script>
12. </head>
13. <body>
14. <div class="controls">
15. 网格线<input id="gridCheckBox" type="checkbox" checked="checked" >
16. 坐标轴<input id="axesCheckBox" type="checkbox" checked="checked" >
17. <input type="button" value="清除画布" id="eraseAllButton">
18. </div>
19. 
20. &

内容来自淘豆网转载请标明出处.