js实现填涂画板

文章目录

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

1实现效果

最上方一栏:

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

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

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

2 实现代码

html 复制代码
<!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>
相关推荐
2501_9159184126 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
rannn_1112 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5