使用Canvas实现画图程序。
本次更新主要实现了一下功能:
虚线实线的选择、辅助线、线条颜色选择、线条宽度选择
进一步整理了下代码,发现了不少很有用的写法,具体看下面。
效果截图:
源代码:
①HTML代码
<!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="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
</select>
线条宽度<select id="lineWidthSelectBox">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
网格线<input id="gridCheckBox" type="checkbox" checked="checked" >
坐标轴<input id="axesCheckBox" type="checkbox" checked="checked" >
辅助线<input id="guideWiresCheckBox" type="checkbox" checked="checked" >
<input typ