js实现填涂画板

文章目录

• 1实现效果
• 2 实现代码

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

1实现效果

最上方一栏：

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

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

右侧是显示当前所选颜色

下方填涂板是表格实现的。

2 实现代码

    
    
    
    
        * {
            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;
        }
    



    
        
        
        
            重置颜色
            清空画板
            后退一步
            涂改液
        
        
            当前所选颜色为：rgb(255,0,0)
        
    

    

    
    
        // 存放改变颜色的td索引
        let bakeTable = [];
        let div = document.getElementById('content');
        let width = 60;
        let height = 25;
        // 初始化颜色按钮
        createColorTable();
        // 打印画板
        let str = ""
        for (let i = 0; i < height; i++) {
            str += ""
            for (let j = 0; j < width; j++) {
                str += "";
            }
            str += '';
        }
        str += ""
        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 += '+ randomColor() + '">';
            }
            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 = "";
            }
        }