持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

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() 方法定义的路径。默认颜色是黑色)

实现一个前端小画布