개발

그림판 만들기 예제 본문

Frontend/JavaScript

그림판 만들기 예제

Study 2021. 3. 20. 16:20

 

그림그리는 기능, 그리는것 녹화기능, 녹화된 순서대로 그리는 기능 녹화삭제, 그림지우기, 디버그기능 지원

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이차원함수는데이터베이스</title>
    <style>
        body{margin: 0px;}
        .wrapper{
            width: 1200px;
            height: 800px;
            background-color: green;
            overflow: hidden;
        }
        #content{
            width: 1000px;
            height: 100%;
            background-color: yellow;
            float: left;
            overflow: hidden;
        }
        #log{
            width: 200px;
            height: 100%;
            background-color: pink;
            float: left;
        }
    </style>
    <script>
        var content;
        var log;
        var aptBox=[];
        var border=0;
        var flag=false;
        var recordArray=[];// 녹화용 어레이
        var recordFlag=false;
        var boxSize=50;
        var playFlag=false;
        var playCount=0;
 
        function init(){
            content=document.getElementById("content");
            log=document.getElementById("log");
            createRect()
            setInterval("recPlay()",200)
            content.addEventListener("mousedown",function(){
                flag=true;
            });
            content.addEventListener("mouseup",function(){
                flag=false;
            });
        }
        function createRect(){
            for(var a=0;a<(800/boxSize);a++){
                var linebox=[];
                for(var i=0;i<(1000/boxSize);i++){
                    var rect=document.createElement("div");
                    rect.style.border=border+"px solid red";
                    rect.style.width=boxSize+"px";
                    rect.style.height=boxSize+"px";
                    rect.style.boxSizing="border-box";
                    rect.style.float="left";
                    rect.id=[a,i];
 
                    rect.innerText=rect.id;
                    content.appendChild(rect);
                    linebox.push(rect);
 
                    rect.addEventListener("mouseover", function(){
                        if(flag){
                            this.style.backgroundColor="red";
                            var pos =this.id.split(",");
                            if(recordFlag){
                                recordArray.push(pos);
                                printLog();
                            }
                        }
                    });
                }
                aptBox.push(linebox);
            }
        }
 
        function setFlag(){
            border=(border==0)? 1:0;
            for(var i=0;i<aptBox.length;i++){
                for(var a=0;a<aptBox[i].length;a++){
                    aptBox[i][a].style.border=border+"px solid red";
                    
                }
            }
        }
        //녹화여부 결정함수
        function setRecordFlag(){
            document.getElementById("rec-bt").style.background=(recordFlag)? "":"red";
            recordFlag=!recordFlag;
        }
        //로그에 정보출력
        function printLog(){
            var str="[좌표]\n";
            for(var i=0;i<recordArray.length;i++){
                var arr=recordArray[i]
                str+=arr[0]+"층"+arr[1]+"호 \n";
            }
            log.innerText=str;
        }
        function erase(){
            //컨텓트에 출력된 녀석들 초기화
            //모든 사각형은 aptBox 안에 있다
            for(var i=0;i<aptBox.length;i++){
                for(var a=0;a<aptBox[i].length;a++){
                    aptBox[i][a].style.background="none";
                }
            }
        }
        //화면에 표시하자~
        function recPlay(){
            if(playFlag){
                // var dot=recordArray[i];
                if(playCount<recordArray.length){
                    aptBox[recordArray[playCount][0]][recordArray[playCount][1]].style.background="green";
                    playCount++
                }else{
                    playFlag=false;
                    playCount=0;
                }
            }
        }
        function resetRec(){
            recordArray=[];
            log.innerText="";
        }
        function playFlagBt(){
            playFlag=true;
        }
        window.addEventListener("load", function(){
            init();
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <div id="content"></div>
        <div id="log"></div>
    </div>
        <button id="rec-bt" onclick="setRecordFlag()">rec</button>
        <button onclick="playFlagBt()">play</button>
        <button onclick="erase()">이레이즈</button>
        <button onclick="resetRec()">기록초기화</button>
        <button onclick="setFlag()">딥어그</button>
</body>
</html>
 cs

'Frontend > JavaScript' 카테고리의 다른 글

팝업 이미지카드 예제  (0) 2021.03.21
베네치아 타자게임 예제  (2) 2021.03.21
좌표를 이용한 배열, 맵 연동  (0) 2021.03.20
배열을 이용한 좌표녹화, 이동  (0) 2021.03.20
스크롤배너 예제  (0) 2021.03.20
'Frontend/JavaScript' Related Articles more