canvas 实现自由画线，变换颜色、画笔大小，撤销上一步等简单功能
画板
<style>
body,div,canvas,h5,input,ul,li,p,button{
margin: 0px;
padding: 0px;
position: relative;
}
#mycanvas{
margin: 5px;
}
#content{
margin: 5px auto;
width: 700px;
height: 510px;
border: 1px solid gray;
}
#canvas\_selector{
position: absolute;
margin-left: 505px;
margin-top: -512px;
height: 500px;
width: 190px;
border:1px solid black;
}
.title{
text-align: center;
margin-bottom: 10px;
}
ul li{
list-style-type: none;
margin: 10px 30px 10px 20px;
display: block;
float: left;
width: 40px;
height: 20px;
background:greenyellow;
cursor: pointer;
border: 1px solid gray;
}
#canvas\_color,#canvas\_brush,#canvas\_control,#canvasImage{
margin:50px 0 50px 0;
}
#canvas\_brush{
height: 80px;
margin:10px 10px 0px 20px;
background:greenyellow;
text-align:center;
}
#lineT{
width: 150px;
height: 30px;
background:bisque;
}
#canvas\_control{
margin:10px 10px 20px 30px;
text-align:center;
}
#canvasImage{
text-align: center;
}
#imgDiv{
margin: 0 auto;
}
#line{
width: 40px;
height: 20px;
cursor: pointer;
}
</style>
<div id="canvas\_color">
<h5 class="title">颜色<input type="color" name="color" id="changeColor" /></h5>
</div>
<div id="canvas\_brush">
<h5 class="title">画笔大小</h5>
<input type="range" id="lineT" min="1" max="100" value="2">
</div>
<div id="canvas\_control">
<h5 class="title">操作</h5>
<span><button style="background:greenyellow" id="prev">上一步</button></span>
<span><button style="background:greenyellow" id="cloth">橡皮擦</button></span>
<span><button style="background:#ffc200" id="clear">清除</button></span>
</div>
<div id="canvasImage">
<button id="createImg">生成图像</button>
</div>
</div>
</div>
<div id="imgDiv"></div>
