原生 canvas 实现一个画板案例

旧梦星轨

已于 2023-04-02 17:05:42 修改

阅读量1.2k

点赞数

分类专栏：代码片段集文章标签： javascript html5 前端

于 2021-11-14 18:36:26 首次发布

本文链接：https://blog.csdn.net/qq_60961397/article/details/121321202

版权

代码片段集专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>

<style>
    #huaban {
        display: inline-flex;
        justify-content: space-between;
        width: 500px;
        height: 40px;
        align-items: center;
    }
    #huaban>div {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 40px;
    }
</style>

<body>

    <canvas width="500" height="500" style="border:1px solid;"></canvas>
    <div id="huaban">
        <input type="range" id="range" value="1">
        <input type="submit" value="擦除" id="button">
        <input type="color" id="color">
    </div>


    <script>

        const canvas = document.querySelector('canvas');               //获取画布
        let ctx = canvas.getContext('2d');                      //声明画布的描绘类型为，2D绘图

  
       
        //画布

        canvas.onmousedown = function (event) {         //当我在canvas，里面，有一个鼠标按下时，就触发的的事件
            // 获取起始坐标
            ctx.moveTo(event.offsetX, event.offsetY);    //线条的起点坐标就是，我点下时，鼠标相对于事件源的坐标

            canvas.onmousemove = function (event) {          //然后当鼠标按住不动，开始移动，触发鼠标移动事件
                ctx.lineTo(event.offsetX, event.offsetY);   //这时候，线条移动到的位置，就等于，鼠标移动到某个点时的坐标，随着鼠标的移动不断变化，就相当于用画笔画图
                ctx.strokeStyle = see;           //线条的颜色，等于，获取到颜色的变量
                ctx.lineWidth = liwidht;                         //线条的粗细值，等于，储存获取数值的变量
                ctx.stroke();                 //描绘
            }
            document.onmouseup = function () {             //当鼠标松开时，就取消鼠标的移动事件，停止继续画线
                canvas.onmousemove = null
            }
            ctx.beginPath();    //        清除路径列表，让每条线之间的样式互不影响
        }

        //颜色
        let see = null;                 //声明一个变量，用来放获取的颜色
        color.onchange = function () {        //当input标签，失焦时，触发一个事件
            see = color.value;              //获取到的input，value，颜色存到声明的变量里面
        }

        // 字体大小

        let liwidht = 1           //声明一个变量，存放线条粗细的数值         
        range.onchange = function () {                                //有一个鼠标失焦触发的的事件
            liwidht = parseInt(range.value / 10);        //粗细，我们这里取1-10,由于input，滑块的默认最大值是100，所以我们这里，把获取到的input值，除以10，并且取整一下。
            if (liwidht < 1) {                           //判断一下，如果，当取值小于1时，那么它的值，就为一，意思就是，线段，的粗细值，最小为1
                liwidht = 1
            }
        }
        //擦除
        button.onclick = function () {                 //当我点击擦除按钮后，有一个擦除，清屏事件，
            ctx.clearRect(0, 0, canvas.width, canvas.height);                 //括号里是，擦除的起点坐标，为左上角的0点位置，擦除的范围是，整个画布的宽和高
        }
    </script>

</body>

</html>