Canvas版实现画图、虚线、辅助线、线条颜色、线条宽度课件.docx

Canvas实现画图、虚线、辅助线、线条颜色、线条宽度，整合加强版使用Canvas实现画图程序。本次更新主要实现了一下功能：虚线实线的选择、辅助线、线条颜色选择、线条宽度选择进一步整理了下代码，发现了不少很有用的写法，具体看下面。效果截图：源代码：①HTML代码[html]?view plaincopy!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坐标、保存\还原当前绘图表面数据、橡皮筋法相关函数、绘制辅助线相关函数、初始化函数??????????????事件处理：鼠标down,move,up事件、按钮点击事件、单选框变化事件??????????--??????????script?type?=?text/javascript?src?=mikuCanvasPaintAppMain.js/script??/html??②绘制坐标轴与网格[html]?view plaincopy!docutype?html??!--date?201