JavaScript 制作简单画板

Posted 西瓜霜^_^

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 制作简单画板相关的知识，希望对你有一定的参考价值。

js原生我不太懂,可能写的比较垃圾,主要是想解决禁止拖拽和批量绑定事件,以及生成页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画画</title>
</head>
<style>
    #box{
        float: left;
        border: 1px solid black;
    }
    .cell{
        background: pink;
        width: 5px;
        height: 5px;
        float: left;
    }
    .cell_c{
        clear:left;
    }
</style>
<body>
    <div id="box" onmouseup="end_hua()" onmousedown="start_hua()"></div>
    <script>
        let height = 100;
        let width = 100;
        let kaiguan = 0;
        for(var i=0;i<height;i++){
            for(var j=0;j<width;j++){
                let d = document.createElement("div");
                d.ondragstart = function(){return false;};//禁用拖拽
                d.onmousemove = function(){hua(d)};
                d.className = "cell";
                if(j==0){
                    d.className = "cell cell_c";
                }
                document.getElementById("box").appendChild(d);
            }
        }
        
        function start_hua(){
            kaiguan = 1;
            console.log("开始")
        }
        function end_hua(){
            kaiguan = 0;
            console.log("结束")
        }
        function hua(e){
            if(kaiguan==1){
                e.style.backgroundColor="black"
            }
            // console.log()
        }
    </script>
</body>
</html>

　　

以上是关于JavaScript 制作简单画板的主要内容，如果未能解决你的问题，请参考以下文章

OpenCV +Python 制作画板

Canvas在线画图—简单制作一个画板

Java GUI小程序--画板

python 用于在终端中运行的sublime text 3的简单代码片段制作工具

JavaScript 简易画板

如何用课件制作工具画固定长度的线段