js 鼠标拖拽绘画，自动设置大小，颜色

最新推荐文章于 2024-07-08 08:00:00 发布

最新推荐文章于 2024-07-08 08:00:00 发布

阅读量438

点赞数

分类专栏： html css js jq 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Vue1024/article/details/122363858

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这是一个使用JavaScript实现的简单绘图板应用，用户可以通过鼠标拖拽在画布上绘画，并能选择线条的粗细和颜色。点击清空按钮可以清除画布，回退按钮可以撤销最后一步操作。画布通过CSS样式进行布局，颜色和粗细通过下拉菜单选择，实现了基本的绘图功能。

摘要由CSDN通过智能技术生成

js 鼠标拖拽绘画，自动设置大小，颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Fly">
    <title>Title</title>
    <style>
        *{ margin: 0; padding: 0; font-family:Microsoft yahei,serif;}
        li{ list-style:none;}
        #box{
            height: 650px;
        }
        #box .tool{
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        #box .tool select{
            margin-right: 20px;
        }
        #box .tool input[type=button]{
            width: 50px;
            height: 25px;
        }
        #box .huaban{
            overflow: hidden;
            height: 600px;
            border: 1px dashed #b500ff;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="tool">
            <span>粗细</span>
            <select id="select1">
                <option value="5">5</option>
                <option value="7">7</option>
                <option value="9">9</option>
                <option value="11">11</option>
                <option value="13">13</option>
            </select>
            <span>颜色</span>
            <select name="" id="select2">
                <option value="red">红色</option>
                <option value="green">绿色</option>
                <option value="yellow">黄色</option>
                <option value="blue">蓝色</option>
                <option value="pink">粉色</option>
            </select>
            <input type="button" value="清空" id="clear">
            <input type="button" value="回退" id="back">
        </p>
        <div class="huaban"></div>
    </div>
    <script>

        var oH = document.querySelector("#box .huaban"),
            oS1 = document.getElementById("select1"),
            oS2 = document.getElementById("select2"),
            oClear = document.getElementById("clear"),
            oBack = document.getElementById("back"),
            arrH = [];
        oClear.onclick = function () {
            oH.innerHTML = "";
        };
        oBack.onclick = function () {
            console.log(arrH.length);
            if ( arrH.length ){
                var aP = arrH[arrH.length-1];
                console.log(aP)
                for (var i = 0; i < aP.length; i++) {
                    oH.removeChild(aP[i] );
                }
                arrH.pop();
            }
        };
        
        oH.onmousedown = function () {
            var This = this;
            arrH[arrH.length] = [];
            console.log(arrH[arrH.length]);
            console.log(arrH)
            document.onmousemove = function (e) {
                e = e || window.event;
                var x = e.clientX,
                    y = e.clientY,
                    oP = this.createElement("p");
                oP.style.position = "absolute";
                oP.style.left = x + 'px';
                oP.style.top = y + 'px';
                oP.style.width = oS1.value + "px";
                oP.style.height = oS1.value + "px";
                oP.style.backgroundColor = oS2.value;
                This.appendChild(oP);
                arrH[arrH.length-1].push(oP);
            };
            document.onmouseup = function () {
                this.onmousemove = null;
                this.onmouseup = null;
            };
            return false;
        }

    </script>
</body>
</html>