20行代码(html+js)实现手写签名小功能

我正在参加「掘金·启航计划」

今天分享一个只用20行代码（html+js）就能实现手写签名的小功能，小白也能看懂啦！！😍😍

分析

既然是签名小功能，那么显然分为三个步骤：👇

• 鼠标按下
• 鼠标移动
• 鼠标抬起

这三个步骤可以理解为三个事件，除此之外，既然要签名，那肯定要有签名的地方呀，这个我们可以用canvas标签来实现。

但是！！我们又如何判断鼠标是否按下又或者是抬起呢？这里我们用到的是在绑定三个事件之前设置一个开关变量👉isDrawing，当鼠标按下的时候，将其赋值为true，当鼠标抬起的时候又变回false。

接下来我们开干！！🧐🧐

代码建构

第一步：canvas标签

<canvas id = 'cvs' width="1920" height="950"></canvas>

ps:这里由于方便书写，我把画布设置为跟浏览器差不多大（可自行调整）

第二步：js代码

我们在写js代码之前首先要获取到画布标签：document.getElementById('cvs')

再获取到它的渲染实例：cvs.getContext('2d')

设置变量开关：let isDrawing = false;

绑定监听三个事件：cvs.addEventListener

• 鼠标按下：mousedown 这时赋值开关变量为ture并捕获鼠标落下的坐标设置划线起始点

cvs.addEventListener('mousedown', e => {
    isDrawing = true;
    ctx.moveTo(e.pageX, e.pageY);
});

• 鼠标滑动：mousemove这时通过判断isDrawing值是否为真来决定是否画线，如果为否则直接不执行，用到stroke()方法。

cvs.addEventListener('mousemove', e => {
    if(isDrawing) {
    ctx.lineTo(e.pageX, e.pageY);
    ctx.stroke();
    };
});

• 鼠标抬起：mouseup此时直接赋值开关变量false👉isDrawing = false;到此大功告成！

完整代码

    <!-- 画布 -->
    <canvas id = 'cvs' width="1920" height="950"></canvas>
    <script>
        // 获取canvas标签
        const cvs = document.getElementById('cvs');
        //获取Context对象（渲染实例）
        const ctx = cvs.getContext('2d');
        //变量开关
        let isDrawing = false;
        //鼠标按下事件
        cvs.addEventListener('mousedown', e => {
            isDrawing = true;
            ctx.moveTo(e.pageX, e.pageY);
        });
        //鼠标移动事件
        cvs.addEventListener('mousemove', e => {
            if(isDrawing) {
                ctx.lineTo(e.pageX, e.pageY);
                ctx.stroke();
            }
        });
        //鼠标抬起事件
        cvs.addEventListener('mouseup', e => {
            isDrawing = false;
        });
    </script>

效果如下😂😂

辛苦掘金的运营小同学啦！！😘😘