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

Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版 使用Canvas实现画图程序。 本次更新主要实现了一下功能： 虚线实线的选择、辅助线、线条颜色选择、线条宽度选择 进一步整理了下代码，发现了不少很有用的写法，具体看下面。 效果截图： 源代码： ①HTML代码 [html]? HYPERLINK /mikuscallion/article/details\o view plain view plain HYPERLINK /mikuscallion/article/details\o copy copy !docutype?html?? !--date?2014-12-28--?? html?? ????head?? ????????meta?http-equiv=content-type?content=text/html;?charset=utf-8?/?? ????????style?type=text/css?? ????????????canvas{?? ????????????????background-color:?rgb(247,?247,?247);?? ????????????????margin-top:?10px;?? ????????????}?? ????????/style?? ????/head?? ????body?? ????????div?class=controls?? ????????????线条类型select?id=lineTypeSelectBox?? ????????????option?value=solid实线/option?? ????????????option?value=dashed虚线/option?? ????????????/select?? ????????????线条颜色select?id=strokeColorSelectBox?? ????????????????????option?value=blackblack/option?? ????????????????????option?value=redred/option?? ????????????????????option?value=blueblue/option?? ????????????/select?? ????????????线条宽度select?id=lineWidthSelectBox?? ????????????????????option?value=11/option?? ????????????????????option?value=22/option?? ????????????????????option?value=44/option?? ????????????/select?????????????? ????????????网格线input??id=gridCheckBox?type=checkbox?checked=checked??? ????????????坐标轴input??id=axesCheckBox?type=checkbox?checked=checked??? ????????????辅助线input??id=guideWiresCheckBox?type=checkbox?checked=checked??? ????????????input?type=button?value=清除画布?id=eraseAllButton?? ????????/div?? ????????!--canvas默认大小300*150--?? ????????canvas?id=canvas?width=800?height=500?? ????????/canvas?? ????/body?? ????????!--导入绘制坐标、网格的js文件--?? ????????script?type?=?text/javascript?src?=mikuCanvasAxes.js/script?? ????????!--导入绘制虚线的js文件--?? ????????script?type?=?text/javascript?src?=mikuCanvasLine.js/script?? ????????!--导入主要绘图js文件--?? ????????!--?? ????????????全局变量定义?? ????????????函数：窗口坐标转换为Canvas坐标、保存\还原当前绘图表面数据、橡皮筋法相关函数、绘制辅助线相关函数、初始化函数?? ????????????事件处理：鼠标dow