canvas的介绍
在HTML5中 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
鼠标事件
我们可以分别控制三个鼠标事件来控制绘画的状态
mouseup
这是绑定的鼠标抬起的事件，鼠标抬起后会触发
mousedown
这是绑定的鼠标摁下的事件，鼠标摁下后会触发
mousemove
这是绑定的鼠标移动的事件，鼠标移动时会触发
一个小实验
<!DOCTYPE html>
<html>
<head>
<title>
鼠标事件测试
</title>
<style>
#mouse {
width: 600px;
height: 600px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="mouse"></div>
</body>
<script>
let mouse = document.getElementById('mouse');
// mouse.addEventListener('mousedown',()=>{
// alert("鼠标按下")
// })
// mouse.addEventListener("mousemove",()=>{
// alert("鼠标滑过");
// })
mouse.addEventListener("mouseup",()=>{
alert("鼠标抬起");
})
</script>
</html>测试某一个方法的时候就可以把其他的绑定的鼠标事件注释掉，然后去进行测试。
开始写我们的画布
<!DOCTYPE html>
<html>
<head>
<title>
用cavons实现一个画画的板子
</title>
<style>
html,body {
width: 100%;
width: 100%;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 画布 -->
<canvas id="canvas"></canvas>
<script>
// 获取canvas标签
const canvas = document.getElementById('canvas');
//渲染
const ctx = canvas.getContext('2d');
//变量开关
let flag = false;
//为canvas绑定一个鼠标按下事件
canvas.addEventListener('mousedown', e => {
flag = true;
ctx.moveTo(e.pageX, e.pageY);
});
//canvas绑定一个鼠标移动事件
canvas.addEventListener('mousemove', e => {
if(flag) {
ctx.lineTo(e.pageX, e.pageY);
ctx.stroke();
}
});
//canvas绑定一个鼠标抬起事件
canvas.addEventListener('mouseup', e => {
flag = false;
});
</script>
</body>
</html>以上就完成了我们的画布了
接下来我们运行一下
虽然很丑，但是效果大概是这个样子
我们来解析一下这段代码，核心思路是首先获取画布对象，然后创建context渲染的实例，接下来我们通过flag的状态来判断一下
我们还可以通过stroke()方法来进行连接点之间，最终实现画布的效果。
(stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色)
