[JS] canvas 로 그림판 만들기

**본 블로그는 '노마드코더-바닐라JS로 canvas에서 그림그리기' 강의를 클론코딩한 것입니다!

코드는 깃허브, 자세한 설명은 강의를 참고해주세요 

 

* 

 

 

바닐라 JS란? : 프레임워크 혹은 라이브러리가 저장되지 않은 순수한 자바스크립트 / 아무것도 포함이 되지않은 순수한 자바스크립트 

 

0. 캔버스 그리기 -getContext

const canvas = document.querySelector("canvas");
const ctx=canvas.getContext("2d");

 

1. 사각형 그리기 -fillRect()

사각형의 선 그리기 ctx.rect(x,y,w,h)

>이때 선의 색이 적용되지 않아 보이지 않는다.

> stroke(): 테두리 그리기/

> fill() : 색으로 채우기 

(**** 선을 만든 후에는 꼭 stroke를 해줘야 한다 **** ) 

ctx.rect(50,50,100,100);
ctx.rect(150,150,100,100);
ctx.rect(250,250,100,100);

ctx.fill();
// 이 앞의 것들이 모두 채워진다.


ctx.beginPath();
ctx.rect(350,350,100,100);
ctx.fillStyle="red";
ctx.fill();

#이전경로와 완전 분리 
#밑에는 빨간색으로 채워진다.

 

-- fillRect안에서는 fill과 rect를 호출함 

 

1-1. 그린 그림의 경로 나누기 : 끊어가기를 원하는 곳 맨 앞에 추가해서 새 경로를 만들 수 있다. 

> 새 경로 시작하기: beginPath() 

(이전 경로와 아예 단절이 된다.) 

 

2. 브러쉬 움직이게 하기-moveTo(x,y)

선을 긋지 않고 연필을 종이의 다른 부분으로 움직인다. 

(선을 긋는것과는 다른 문제!) 

 

 

3. 선 긋기 - lineTo()

선을 그으면서 연필을 종이의 다른 부분으로 움직인다. 

 

 

4. 원그리기 

arc  (x축, y축, 반지름, 시작angle, 끝angle) 

 

  즉 완전한 원을 그리려면 start angle이 0, end angle이 ( 2 * Math.PI ) 가 되면 된다. 

 

 5. 그림 그리기 이벤트 추가

function onClick(event) {
	ctx.lineTo(event.offsetX, event.offsetY);
}

canvas. addEventListener("click", onClick);
// 클릭이라는 이벤트를 추가할 거고
// onClick 이라는 함수를 발생시킬 것이다.

 

 

 6. 요소 vs document

그려진 캔버스에서 나가도 손을 떼어도 계속 그림이 그려지는 오류가 발생할 때

canvas.addEventListener("mouseup", onMouseUp) 이게 아니라

document.addEventListener 라고 해주면 문서 어디에서든지 마우스에서 손을 때면 

isPainting= false가 적용이 된다.

 

7. 펜 두께 조절하기

function onLineWidthChange(event) {
	ctx.lineWidth = event.target.value;
}


lineWidth.addEventListener("change", onLineWidthChange)
// 우리가 ctx를 업데이트 할 수 있는 것이다.

 

8. 색상 선택하기 -

자바스크립트 데이터 속성 사용하기 & 배열요소 사용하기

** HTML 에서 데이터 속성을 사용하면 이건 배열이 아니라 단지 ArrayLike 객체일 뿐이지 배열은 아니기 때문에 배열로 직접 만들어 줘야한다!

 

const colorOptions = Array.from(
	document.getElementByClassName("color-option")
);

colorOptions.forEach(color=> color.addEventListener("click",onColorClick))

function onColorClick(event) {
	console.dir(event.target.dataset.color);
}

// forEach: 배열로 바꿔주었기 때문에 color-option이라는 배열 하나하나의 값에 접근할 수 있음
// 즉 지금 배열 하나하나의 요소에 접근해서 click 이라는 이벤트를 추가해주었다.
// 그리고 onClick 을 사용해서 하나하나의 객체의 이벤트에 접근하여 이벤트를 발생시켜주었다.

 

 

왜냐면 위에서 class name ="color-option" 은 데이터 옵션을 사용했었기 때문에 

배열 값이 아니라 HTMLCollection으로 주기 때문이다. 

 

9. 채우기 모드 / 그리기 모드 버튼 추가하기 

//HTML
<div>
<button id="mode-btn">Fill</button>
</div>

 

const modeBtn = document.getElementById("mode-btn")

let isFilling = false;
// 채우는 모드 먼저 생각해주기 

function onModeClick() {
	if(isFilling){
    	isFilling = false
        modeBtn.innterText="fill"
    } else {
    	isFilling = true
        modeBtn.innterText="Draw"
    }


}

modeBtn.addEventListener("click",onModeClick)

// 색깔 클릭해서 캔버스 전체 채우기 모드 추가하기

function onCanvasClick() {
	if(isFilling){
    ctx.fillRect(0,0, 800,800);
}
// 전체 크기를 줘서 캔버스 전체에 색깔이 칠해지도록 된다. 
canvas.addEventListener("change",onCanvasClick)

 

 

10. 그림판 초기화 버튼

//HTML

<div>
<button id="destroy-btn">Destroy</button>
</div>

 

//JS
//초기화 하는 버튼 만들기( 즉 초기 상태로 돌아가고 싶어!) 
// 초기화 한다는 의미는 캔버스 색깔을 하얀색으로 덮어준다는 것과 같다. 
// 위에서 채우기 모드를 만든 것처럼 하얀색으로 채워준다. 

const destroyBtn=document.getElementById("destroy-btn");

function onDestroyClick () {
	ctx.fillStyle = "white" 
    ctx.fillRect(0,0,800,800);
 }


destroyBtn.addEventListener("click",onDestroyClick);

 

11. 지우개 만들기

//JS
//얘는 아까와 비슷하지만 선스타일을 white로 바꿔주기만 하면 된다. 

function onEraserClick(){
	ctx.strokeStyle="white";
    isFilling= false;
    modeBtn.innterText="Fill";

}

eraserBtn.addEventListener("click", onEraseerClick);

 

 

12.이미지 추가하기 

// HTML
<input type="file" accept="image/*" id="file">

//여기서 accept를 사용해서 동영상 파일은 안되고 이미지 파일만 올릴 수 있도록 한다.

 

//JS
fileInput.addEventListener("change", onFileChange);

function onFileChange(event) {
	console.dir(event.target);
}

//여기서 event.target은 fileInput에서 받은 target인 input을 받는거다

 

 

13.텍스트 입력 넣기

//HTML

<input type="text" id="text">

//JS
const textInput=document.getElementById("text");

 

13-1. 캔버스를 더블클릭해서 텍스트 추가하기

//JS

function onDoubleClick(event) {
	const text=textInput.value;
    ctx.lineWidth=1;
    ctx.strokeText(text,
    //ctx.stroke(text, x좌표, y좌표
	
canvas.addEventListener("dbclick",onDoubleClick);

 

13-2. 

ctx. save- ctx의 현재 상태 저장

ctx.restore - 저장해뒀었던 버전으로 되돌리기 

function onDoubleClick (event) {
	ctx.save();
    const text=textInput.value;
    ctx.lineWidth =1;
    ctx.strokeText(text, event.offsetX, event.offsetY);
    
    ctx.restore();
    //기존의 체크포인트로 돌아감
}

 

14.이미지 저장하기

function onSaveClick() {
	const url=canvas.toDataURL();
    const a= document.createteElement("a")
    a.href=url
    //이전에 이미지 데이터를 저장한 url변수로 저장
    
    a.download="MyDrawing.jpg";
    a.click();
    
}

// <a href="" download>
//download속성을 추가시키면 파일을 다운로드 시킨다.

 

캔버스에 그린 그림을 url로 변환한 다음에 a 태그를 생성해 가짜 링크를 만든 다음에 

링크의 href는 그림 url로 설정해주고 파일명을 지정하여 설정해주고 

링크를 클릭해주면 파일이 다운로드 된다. 

 

 

***

코드 전체 

 

음냐음냐..클론코딩 오랜만에 했는데 깃허브에 올릴까말까 하다가...

아까워서 그냥 올렸다. ㅎㅎ

https://github.com/hye-long/clonecoding.canvas.git