Notice
Recent Posts
Recent Comments
Link
컴퓨터는 잘못이 없다..
[JavaScript]addEventListener을 이용해 그림판 만들어보기 본문
Contents
접기
[만들 그림판]
[그림판 예제 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step07_DrawPanel.html</title>
<!--css영역-->
<style>
canvas{
border: 1px dashed gray;
cursor: crosshair;
}
</style>
</head>
<body>
<!--html영역-->
<h1>그림판</h1>
<canvas id="myCanvas" width="500" height="500"></canvas>
<br/>
<input type="color" id="inputColor"/>
<select id="lineWidth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option>4</option>
<option selected>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<!--option selected 는 defalut로 선택되는 option-->
<!--selected는 checkbox, radio의 checked 같은 역할!-->
<!--value를 정해주지 않으면 innerText가 value가 된다!-->
</select>
<button id="fillBackBtn">배경색</button>
<label>
지우개 기능
<input type="checkbox" id="eraseCheck"/>
</label>
<!--js 영역 시작-->
<script>
//canvas 요소의 참조값 얻어오기
let canvas=document.querySelector("#myCanvas");
//canvas 에 렌더링 할수 있는 도구(context) 의 참조값 얻어오기
let context=canvas.getContext("2d");
//페이지 로딩 시점에 선의 굵기 초기값 지정하기
let currentWidth=5;
//선의 시작과 끝을 둥글게
context.lineCap="round";
//선의 교차점을 둥글게
context.lineJoin="round";
//선의 색상을 저장할 변수 만들고 "black" 으로 초기화
let color="black";
//선의 색상 지정하기
context.strokeStyle=color;
//마우스가 down 상태 인지 여부
let isMouseDown=false;
//그림을 그리는 상태인지 지우는 상태인지 여부
// false => 그림을 그리는 상태, true => 지우는 상태
let isErase=false;
//아래 6줄은 페이지가 로딩되는 시점에 그림판에 그림이 그려져있음
// context.beginPath();
// context.moveTo(100, 100);
// context.lineTo(200, 200);
// context.lineTo(200, 100);
// context.stroke();
// context.closePath();
//그림 그리는 상태
canvas.addEventListener("mousedown", function(event){
//마우스 down 상태로 바꿔준다.
isMouseDown=true;
//이벤트가 일어난곳의 좌표
let x=event.offsetX;
let y=event.offsetY;
//mousedown 이벤트가 일어난 지점에서 부터 그릴 준비를 한다.
context.beginPath();
context.moveTo(x, y);
//변수에 저장된 값으로 색상 지정
context.strokeStyle=color;
//변수에 저장된 값으로 선의 굵기 지정
context.lineWidth=currentWidth;
});
//그림 그리는 상태 or 그림 지우는 상태
//canvas 에 mousemove 이벤트 처리
canvas.addEventListener("mousemove", function(event){
//만일 마우스 down 상태 일때
if(isMouseDown == true){
//이벤트가 일어난곳의 좌표
let x=event.offsetX;
let y=event.offsetY;
if(isErase){ //만일 지우는 작업 상태이면
//현재 커서 위치에 10*10 사이즈의 흰색 블록이 생김
context.clearRect(x, y, 10, 10);
}else{//지우는 작업 상태가 아니라면 (그리는 상태라면)
context.lineTo(x, y);
context.stroke();
}
}
});
//global변수 중 boolean type true, false 설정해주는 코드
canvas.addEventListener("mouseup", function(){
//더이상 작업(그림 or 지우기) 않도록 상태값을 바꿔준다.
isMouseDown=false;
});
//global변수 중 boolean type true, false 설정해주는 코드
//체크박스의 체크 상태가 바뀌었을때 호출되는 함수 등록
document.querySelector("#eraseCheck")
.addEventListener("change", function(){
//체크여부를 (true or false) 변수에 담는다.
//★★★ 다른 input요소와는 다르게 checked 여부를
//불러올 수 있음!!
isErase=this.checked;
//지우는 상태 여부에 따라 커서의 모양을 바꿔준다.
if(isErase){
document.querySelector("#myCanvas")
.style.cursor="not-allowed";
}else{
document.querySelector("#myCanvas")
.style.cursor="crosshair";
}
});
//선의 색상 변경
document.querySelector("#inputColor")
.addEventListener("change", function(){
// color 변수에 현재 value 값을 대입한다.
color=this.value;
});
//선의 굵기 설정
// select 요소에 change 이벤트가 발생했을때 실행할 함수 등록
document.querySelector("#lineWidth")
.addEventListener("change", function(){
//change 이벤트가 일어난 요소의 value 값을 변수에 대입
currentWidth=this.value;
});
//선의 배경색 설정
//배경색상 버튼을 눌렀을때 실행할 함수 등록
document.querySelector("#fillBackBtn")
.addEventListener("click", function(){
//현재 선택된 색상을 체울 색으로 지정하고
context.fillStyle=color;
// fillRect(x, y, width, height) 로 지정된 사각형 영역을 체운다.
context.fillRect(0, 0, 500, 500);
});
</script>
</body>
</html>
[참고]
1. 여기서 등장하는 x축과 y축
2.casvas영역?
3.rgb
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript]산술연산자 (0) | 2020.11.09 |
|---|---|
| [JavaScript]object type 참조하기 (0) | 2020.11.09 |
| [JavaScript]addEventListener 퀴즈 (0) | 2020.11.09 |
'공부/JavaScript' Related Articles
more
Comments
