本文发布于：，最后更新于：2020-09-15，如果内容失效请留言告知。
代码如下：
<!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: 50%;
width: 5px;
height: 5px;
position: absolute;
display: none;
}
.eraseSeries{ /*橡皮大小单选按钮组的排列，此div不单独占一行*/
display: inline-block;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.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.lineWidth=5;//笔迹的粗细
$("#color").change(function(){//笔迹颜色发生改变时
if(eraseFlag==true)//处在擦皮状态
{
$("#erase").trigger("click");//自动触发橡皮的点击事件，以返回到画笔状态
}
c.strokeStyle=$(this).val();//设置画笔状态
c.lineWidth=$(this).val();
});
$("#fontSize").change(function(){//画笔粗细发生改变
if(eraseFlag==true)//同上
{
$("#erase").trigger("click");
}
c.lineWidth=$(this).val();
c.strokeStyle=$("#color").val();
//eraseFlag=false;
});
$(".eraseSeries").click(function(){//橡皮大小发生改变
var size=$('input[name="eraseSize"]:checked').val();//获取到橡皮单选按钮组的选中值
sizeE=size;//将该值传到全局变量上，sizeE需要用来控制橡皮样式的位置
c.lineWidth=size;
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮样式大小发生改变
});
$("#erase").click(function(){//橡皮按钮的点击翻转事件
if(eraseFlag == false){
c.save();//保持上次设置的状态
eraseFlag=true;
c.strokeStyle="white";
$("#erase").text("画笔");//改变按钮上的文字
$(".eraseSeries").show('fast');//橡皮单选组出现
// $("#eraseImg").show();
sizeE=5;
}else{
eraseFlag=false;
$("#erase").text("橡皮");
$(".eraseSeries").hide('fast');
c.restore();//恢复上次画笔的状态（包括颜色，粗细等）
}
});
});
var p_x;//上次鼠标位置
var p_y;
var p_x_now;//当前瞬间鼠标位置
var p_y_now;
var eraseFlag=false;
var sizeE;//橡皮大小
$(document).mousedown(function(e){//鼠标按下触发事件
p_x= e.clientX;//获取位置，并置为上次鼠标位置
p_y= e.clientY;
painting = true;//画笔启动标志
});
$(document).mousemove(function(e){//鼠标移动触发事件
if(eraseFlag==true&& e.clientY>30)//橡皮处在激活状态，并且鼠标Y的位置大于30，也即鼠标在画板内
{
//橡皮图像跟随鼠标而动
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast');
}
else
{
$("#eraseImg").hide('fast');
}
if(painting==true)//处于画笔激活状态
{
//alert(1);
p_x_now= e.clientX;//当前瞬间的鼠标位置
p_y_now= e.clientY;
c.beginPath();//开始路径
//曲线是由一段段非常小的直线构成，计算机运算速度很快，这是一种以直线迭代画曲线的方式
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移动到起始点
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//从起始点画直线到终点
c.stroke();
c.closePath();//封闭路径，这个很重要，如果路径不封闭，
// 那么只要canvas颜色发生改变，所有的之前画过的颜色都发生改变
p_x = p_x_now;//一次迭代后讲当前的瞬间坐标值赋给上次鼠标坐标值
p_y = p_y_now;
}
});
$(document).mouseup(function(e){//鼠标松开触发事件
painting=false;//冻结画笔
});
</script>
</head>
<body>
<div >
<select id="color" > <!--画笔颜色-->
<option class="opt" value="red">红色</option>
<option class="opt" value="yellow">黄色</option>
<option class="opt" value="blue">蓝色</option>
<option class="opt" value="black" selected>黑色</option>
<option class="opt" value="green">绿色</option>
</select>
<select id="fontSize"> <!--画笔大小-->
<option value=5 selected>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=30>30</option>
<option value=30>50</option>
</select>
<button id="erase">擦皮</button> <!--橡皮按钮-->
<div class="eraseSeries"> <!--橡皮大小-->
<input type="radio" name="eraseSize" value="5" checked/>5
<input type="radio" name="eraseSize" value="10"/>10
<input type="radio" name="eraseSize" value="15"/> 15
<input type="radio" name="eraseSize" value="20"/> 20
<input type="radio" name="eraseSize" value="30"/>30
<input type="radio" name="eraseSize" value="30"/>50
<input type="radio" name="eraseSize" value="30"/>100
</div>
</div>
<!--<button id="btn">btn</button>-->
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!--整个画布-->
<div id="eraseImg"></div> <!--橡皮形状-->
</body>
</html>
来源：http://blog.csdn.net/jiangjianANT/article/details/24461987
相关文章:
HTML5 FormData 与无刷新文件上传
HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件
HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结
参加html5年会：HTML5 年度HomeParty暨首届原创游戏大赛颁奖典礼
HTML5 postMessage 消息传输与 POST 跨域通信
网站渐进式增强体验(PWA)改造：Service Worker 应用详解
H5 活动页之移动端 REM 布局适配方法
移动设备(手机)上浏览器全屏隐藏工具栏和菜单栏的设置
我想说的是，首先标题 Canvas 就写错了
已更正，感谢
HTML 5，现在我还用不上啊。
很好的学习博客，收藏了。
html5现在应该是主流吧
独立博客的淡季啊，这年头写博客的太少啦。志文兄你也不写点通俗的内容…