见图:
代码如下:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" Content="text/html;charset=utf-8">
<head>
<title>简易画板</title>
<style>
#eraseImg{ /*橡皮样式*//**/
border:solid;
color:gray;
border-radius: 118px;
width: 5px;
height: 5px;
position: absolute;
display: none;
}
.eraseSeries{ /*橡皮大小单选按钮组的排列,此div不单独占一行*/
display: inline-block;
}
</style>
<script src="jquery-1.7.1.js"></script>
<script>
var c;//获取到的2d画板
var painting = false;//判断是否正在绘画,即鼠标左键是否长按下去
var canvas;//画板
$(function(){
$(".eraseSeries").hide();//初始状态单选按钮组隐藏
canvas=document.getElementById("myCanvas");
c=canvas.getContext("2d");
c.lineCap="round";//设置笔迹边角,否则笔迹会出现断层
c.strokeStyle="black";//笔迹的颜色
c.l