原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能

本文链接：https://blog.csdn.net/qq_52619560/article/details/126039592

1. 本片文章是使用的原生JS代码编写的画板,能实现画笔粗细的修改,以及画笔颜色的修改

2. 用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标移动的位置,到最后鼠标松开的位置.再根据鼠标的移动轨迹进行画线.

3. 源码中封装了两个函数,line()函数是画布的一系列画线方法,change()函数是监听的鼠标移动轨迹,轨迹结合画线方法,完成画板的绘画功能.

// 封装函数功能:画线
function line() {
ctx.beginPath();
ctx.lineWidth = range.value/5;
ctx.strokeStyle = color.value;
ctx.lineJoin = 'round';
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};

// 封装函数功能:监听鼠标的移动轨迹
function changes() {
can.onmousedown = function (el) {

// 获取鼠标点击的初始位置
mouse.x = el.offsetX;
mouse.y = el.offsetY;
can.onmousemove = function (e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;

// 获取鼠标移动的偏移量
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
line();
}
}
can.onmouseup = function () {

// 注意:这里要将鼠标的移动事件值为空
can.onmousemove = null;
}
}

4. 画板清空用到的是canvas中的clearRect()方法,将一整个画布清空.

注意:

在鼠标轨迹的监听事件中,鼠标松开的事件里.要将之前的鼠标事件值为空,这样鼠标松开之后,才不会妨碍后续鼠标事件的执行.

附上源代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="900" height="500" style="border: 1px solid blue;background-color: white;" id="can"></canvas><br>
    线宽: <input type="range" id="range">
    颜色: <input type="color" id="color">
    <button id="btn">清空</button>
    <script>
        /** @type {HTMLCanvasElement} */
        var can = document.getElementById('can');
        var ctx = can.getContext('2d');
        var mouse = { x: 0, y: 0 };
        var last_mouse = { x: 0, y: 0 };
        function changes() {
            can.onmousedown = function (el) {
                mouse.x = el.offsetX;
                mouse.y = el.offsetY;
                can.onmousemove = function (e) {
                    last_mouse.x = mouse.x;
                    last_mouse.y = mouse.y;
                    mouse.x = e.pageX - this.offsetLeft;
                    mouse.y = e.pageY - this.offsetTop;
                    line();
                }
            }
            can.onmouseup = function () {
                can.onmousemove = null;
            }
        }
        changes();
        range.onchange = function () {
            if (range.value == 0) {
                ctx.lineWidth = 1;
            } else {
                ctx.lineWidth = range.value/5;
            }
        }
        function line() {
            ctx.beginPath();
            ctx.lineWidth = range.value/5;
            ctx.strokeStyle = color.value;
            ctx.lineJoin = 'round';
            ctx.moveTo(last_mouse.x, last_mouse.y);
            ctx.lineTo(mouse.x, mouse.y);
            ctx.closePath();
            ctx.stroke();
        };
        btn.onclick = function(){
            ctx.clearRect(0,0,900,500);
        }


    </script>
</body>

</html>

结果展示: