html5 像素风画板,使用Canvas和JavaScript做一个画板

前些天学习了HTML5的元素，今天就来实践一下，用canvas做一个画板。

首先说一下要实现的功能：切换画笔颜色

调整笔刷粗细

清空画布

橡皮擦擦除

撤销操作

保存成图片

兼容移动端(支持触摸)

准备工作

首先，准备个容器,也就是画板了。

然后初始化js：let canvas = document.getElementById("drawing-board");

let ctx = canvas.getContext("2d");

我想把画板做成全屏的，所以接下来设置一下canvas的宽高。let pageWidth = document.documentElement.clientWidth;

let pageHeight = document.documentElement.clientHeight;

canvas.width = pageWidth;

canvas.height = pageHeight;

由于部分IE不支持canvas，如果要兼容IE，我们可以创建一个canvas，然后使用excanvas初始化，针对IE加上exCanvas.js，这里我们暂时先不考虑IE。

实现一个简单的画板

实现思路：监听鼠标事件，用drawCircle()方法把记录的数据画出来。设置初始化当前画布功能为画笔状态，painting = false，

当鼠标按下时(mousedown)，把painting设为true，表示正在画，鼠标没松开。把鼠标点记录下来。

当按下鼠标的时候，鼠标移动(mousemove)就把点记录下来并画出来。

如果鼠标移动过快，浏览器跟不上绘画速度，点与点之间会产品间隙，所以我们需要将画出的点用线连起来(lineTo())。

鼠标松开的时候(mouseup)，把painting设为false。

代码：let painting = false;

let lastPoint &