我们这一节结合之前的API可以来个简单的实践
栗子：结合鼠标交互效果实现画板的功能，有写的功能以及橡皮擦的功能（撤销、前进就先不考虑了）
write.gif
首先来个布局：
需要调节线的粗细以及橡皮擦的大小，我们需要H5的范围表单元素
HTML
<body>
<label>线的粗细：
<input id="line" type="range" step="1" min="1" max="20" value="4">
</label>
<label>橡皮檫的大小：
<input id="rub" type="range" step="1" min="1" max="20" value="1">
</label>
<script src="./index.js"></script>
</body>
JS
1、获取表单元素: 线， 橡皮大小
var lineRange = document.getElementById('line');
var rubRange = document.getElementById('rub');
2、创建Canvas并添加至body中
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.cssText = 'border: 1px solid #ccc';
document.body.appendChild(canvas);
3、线的尺寸、橡皮尺寸：绑定事件
// 线的尺寸
lineRange.addEventListener('input', changeLineWidth);
// 橡皮尺寸
rubRange.addEventListener('input', changeRubSize);
// 橡皮檫的尺寸
function changeRubSize() {
rubSize = this.value;
}
// 线的粗细
function changeLineWidth() {
ctx.lineWidth = this.value;
}
4、 canvas中的事件
var ctx = canvas.getContext('2d');
// 线的粗细
ctx.lineWidth = 4;
// 橡皮檫的尺寸
var rubSize = 1;
// 是否可用写擦功能
var isPress = false;
// 按钮类型
var btnType;
4.1 canvas则需要监听鼠标按下的事件，说明用户下笔
canvas.addEventListener('mousedown', penDown);
// 左键为 写 0
// 中键为 橡皮檫 1
// 下笔事件
function penDown(event) {
isPress = true;
btnType = event.button;
// 第一种 坐标方式
var curX = event.offsetX;
var curY = event.offsetY;
// 写
// 当鼠标按键类型为0的时候，说明用户开始下笔
if (btnType === 0) {
// 开启一个新的路径
ctx.beginPath();
// 并且将鼠标按下的坐标作为绘制路径的起始点
ctx.moveTo(curX, curY);
}
}
4.2 当用户鼠标按下，并且此时监听鼠标移动的事件，说明用户此时正在画布上移动，也就说明用户正在绘制路径
canvas.addEventListener('mousemove', penMove);
// 笔移动事件
function penMove(event) {
if (isPress) {
// 第一种 坐标方式
// var curX = event.offsetX;
// var curY = event.offsetY;
// 第二种 坐标方式
var curX1 = event.clientX - canvas.getBoundingClientRect().x;
var curY1 = event.clientY - canvas.getBoundingClientRect().y;
// 确认过用户是否按下鼠标，当按下时isPress则会为true，
// 当btnType则为0，说明可绘制路径
// 当btnType则为1，说明使用橡皮擦
switch (btnType) {
case 0:
write(curX1, curY1);
break;
case 1:
rub(curX1, curY1);
break;
}
}
}
// 写
function write(x, y) {
ctx.lineTo(x, y);
ctx.stroke();
}
// 擦：擦的功能则是clearRect， 需要注意的是，橡皮擦的中心需要是光标的中心
function rub(x, y) {
var size = 10 * rubSize;
// 橡皮檫的中心点
ctx.clearRect(x - (size / 2), y - (size / 2), size, size);
}
4.3 当鼠标按键抬起的时候，说明用户此时将笔离开画布了
鼠标抬起事件触发，则isPress需要重置为false，闭合路径
canvas.addEventListener('mouseup', penUp);
// 提笔
function penUp() {
isPress = false;
ctx.closePath();
}
