그림판 구현
#기능 설명
1. 그림판에는 선만 그릴 수 있다.
2. 마우스 드래깅으로 그림을 그린다.
3. 마우스가 움직이는 동안 마우스 포인터의 좌표를 출력한다.
4. 그림판에는 마우스로 선택 가능한 16개의 색을 가진 팔레트와 컬러 다이얼로그를 출력하여 사용자로부터 색을 입력받는다. 그리고 그 오른편에는 현재 선택된 색을 표시한다.
5. 선의 굵기를 선택하는 기능을 둔다.
built by HTML, CSS, Javascript
<!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>Document</title>
<style>
@import url("그림판 웹 페이지.css");
</style>
</head>
<body>
<h3>그림판입니다. 그림을 그려보세요</h3>
<hr>
<table>
<tr>
<td onclick = "changeColor(this)" style = "background-color : red"></td>
<td onclick = "changeColor(this)" id = "darkred" style = "background-color : darkred"></td>
<td onclick = "changeColor(this)" id = "orange" style = "background-color : orange"></td>
<td onclick = "changeColor(this)" id = "yellow" style = "background-color : yellow"></td>
<td onclick = "changeColor(this)" style = "background-color : olive"></td>
<td onclick = "changeColor(this)" style = "background-color : purple"></td>
<td onclick = "changeColor(this)" style = "background-color : violet"></td>
<td onclick = "changeColor(this)" style = "background-color : white"></td>
<td><input onchange = "changeColor2(this)" id = "color" type = "color"></td>
</tr>
<tr>
<td onclick = "changeColor(this)" style = "background-color : green"></td>
<td onclick = "changeColor(this)" style = "background-color : lightgreen"></td>
<td onclick = "changeColor(this)" style = "background-color : blue"></td>
<td onclick = "changeColor(this)" style = "background-color : skyblue"></td>
<td onclick = "changeColor(this)" style = "background-color : darkcyan"></td>
<td onclick = "changeColor(this)" style = "background-color : black"></td>
<td onclick = "changeColor(this)" style = "background-color : lightgrey"></td>
<td onclick = "changeColor(this)" style = "background-color : grey"></td>
</tr>
</table>
<table>
<tr><td id = "lineborder">선굵기</td><td id = "showcolor" rowspan="2"></td>
<td><input id = "xpos" type = "text" value = "x = "></td></tr>
<tr><td><input onchange = "changeBorder()" id = "border" type = "text"></td>
<td><input id = "ypos" type = "text" value = "y = "></td></tr>
</table>
<canvas id = "canvas" width = "600" height = "600" style = "background-color: aliceblue;"></canvas>
<script src = "그림판 웹 페이지.js"></script>
</body>
</html>table{
border : 1px solid lightgrey;
background-color: rgba(211, 211, 211, 0.822);
display : inline-block;
}
td{
width : 30px;
height : 30px;
border : 1px solid lightgrey;
margin : 0px;
}
#color{
height : 30px;
padding : 0px;
}
#lineborder{
background-color: white;
text-align: center;
}
#border{
width : 50px;
}
#xpos, #ypos{
width : 50px;
}let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let td = document.getElementsByTagName("td");
let showcolor = document.getElementById("showcolor");
let lineBorder = document.getElementById("border");
let dragging = false;
function changeBorder(){
context.lineWidth = lineBorder.value;
}
function changeColor(obj) {
context.strokeStyle = obj.style.backgroundColor;
showcolor.style.backgroundColor = context.strokeStyle;
}
function changeColor2(obj){
context.strokeStyle = obj.value;
showcolor.style.backgroundColor = context.strokeStyle;
}
canvas.onmousedown = function(e){
dragging = true;
context.beginPath();
context.moveTo(e.offsetX, e.offsetY);
}
canvas.onmousemove = function(e){
document.getElementById("xpos").value = "x = " + e.offsetX;
document.getElementById("ypos").value = "y = " + e.offsetY;
if(dragging == true){
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
}
}
canvas.onmouseout = function(e){
dragging = false;
}
canvas.onmouseup = function(){
dragging = false;
}'CS Study > Projects' 카테고리의 다른 글
| Project 10 : MP3 구현 (0) | 2022.04.08 |
|---|---|
| Project 9 : 단어장 만들기 (0) | 2022.04.08 |
| Project 7 : 상하좌우 키로 셀 이동하기 (0) | 2022.04.08 |
| Project 6 : 마우스 클릭 연습 (0) | 2022.04.08 |
| Project5 : Gambling game (0) | 2022.04.08 |