js实现填涂画板

文章目录

• 1实现效果
• [2 实现代码](#2 实现代码)

凑个数，存粹是好玩儿，哈哈...

1实现效果

最上方一栏：

左侧是颜色按钮，点击选中颜色，

中间是功能按钮，重置颜色、清空画板、回退、涂改液（填涂色置为白色）

右侧是显示当前所选颜色
下方填涂板是表格实现的。

2 实现代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画图板</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #bt {
            display: flex;
            margin-top: 5px;
            height: 30px;
            box-sizing: border-box;
        }

        .bt1 {
            padding-left: 20px;
            flex: 1;
            box-sizing: border-box;
        }

        .bt2 {
            flex: 1;
            text-align: center;
        }

        .bt3 {
            flex: 1;
            font-size: 20px;
        }

        #content {
            margin-top: 10px;
        }

        table {
            border-collapse: collapse;
        }

        td {
            width: 25px;
            height: 25px;
            border: 0.5px solid gray;
        }

        td:hover {
            background-color: gray;
        }

        .b1 {
            margin-left: 10px;
            width: 15px;
            height: 15px;
        }

        .b2 {
            margin-right: 10px;
            width: 100px;
            line-height: 27px;
            background-color: lightgray;
            border: none;
            border-radius: 10px;
        }

        .b1:hover {
            width: 20px;
            height: 20px;
        }

        .b2:hover {
            background-color: lightblue;
        }

        #colorName {
            display: inline-block;
            color: red;
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="bt">
        <div class="bt1">
        </div>
        <div class="bt2">
            <button class="b2">重置颜色</button>
            <button class="b2">清空画板</button>
            <button class="b2">后退一步</button>
            <button class="b2">涂改液</button>
        </div>
        <div class="bt3">
            当前所选颜色为：<span id="colorName">rgb(255,0,0)</span>
        </div>
    </div>

    <div id="content">

    </div>
    <script>
        // 存放改变颜色的td索引
        let bakeTable = [];
        let div = document.getElementById('content');
        let width = 60;
        let height = 25;
        // 初始化颜色按钮
        createColorTable();
        // 打印画板
        let str = "<table>"
        for (let i = 0; i < height; i++) {
            str += "<tr>"
            for (let j = 0; j < width; j++) {
                str += "<td></td>";
            }
            str += '</tr>';
        }
        str += "</table>"
        div.innerHTML = str;
        // 给td加事件
        let tds = document.querySelectorAll("td");
        tds.forEach((td,i) => {
            td.onclick = setColor.bind(td,null,i);
        });
        // 获取功能按钮
        let buts_2 = document.querySelectorAll('.b2');
        // 获取颜色名称
        let tdColorName = document.querySelector("#colorName");
        // 初始化颜色
        let butColor = 'rgb(255,0,0)';

        // 按钮功能
        buts_2[0].onclick = createColorTable;
        buts_2[1].onclick = clearCanvas;
        buts_2[2].onclick = backStep;
        buts_2[3].onclick = function(){
            butColor = 'rgb(255, 255, 255)';
            tdColorName.innerHTML = butColor;
            tdColorName.style.color = butColor;
        };

        function getColor(but) {
            but = this;
            butColor = but.style.backgroundColor;
            tdColorName.innerHTML = butColor;
            tdColorName.style.color = butColor;
        }
        

        function setColor(td,i) {
            td = this;
            td.style.backgroundColor = butColor;
            bakeTable.push(i);
        }

        function randomColor() {
            let color = "#";
            let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
            for (let i = 0; i < 6; i++) {
                let index = parseInt(Math.random() * arr.length);
                color += arr[index];
            }
            return color;
        }

        function createColorTable() {
            let btn_str = '';
            for (let i = 0; i < 15; i++) {
                btn_str += '<button class="b1" style="background-color: ' + randomColor() + '"></button>';
            }
            document.querySelector('.bt1').innerHTML = btn_str;
            let buts = document.querySelectorAll('.b1');
            buts.forEach(but => {
                but.onclick = getColor;
            })
        }
        function clearCanvas(){
            document.querySelectorAll("td").forEach(td=>{
                td.style.backgroundColor = "";
            })
        }
        function backStep(){
            if(bakeTable.length>0){
                let i = bakeTable.pop();
                document.querySelectorAll("td")[i].style.backgroundColor = "";
            }
        }
    </script>
</body>

</html>