[노마드코더] 바닐라JS로 그림앱 만들기 #01

 

캔버스 기본 동작

const canvas = document.querySelector('canvas');
//컨버스에 그림 그릴 때 사용 context
//컨버스의 좌표 시스템을 이용해서 그림을 그린다
const ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 800;

//좌표의 0,0 부터 시작한다
//한 경로로 연결되어 있기 때문에 컬러 변경 시 모든 사각형이 변경 됨 => 새 경로 만들어줘야 함

/* ctx.rect(50, 50, 100, 200);
ctx.rect(150, 150, 100, 100);
// ctx.stroke();
ctx.fill();

ctx.beginPath(); //새 경로 만들기
ctx.rect(350, 350, 100, 100);
ctx.fillStyle = "red";
// setTimeout(()=>{ctx.fill();}, 5000);
ctx.fill();

ctx.beginPath(); //새 경로 만들기
ctx.rect(450, 450, 100, 100);
ctx.fillStyle = "orange";
// setTimeout(()=>{ctx.fill();}, 5000);
ctx.fill(); */

ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.stroke();

 

 

---

컬러 지정, 기본 동작 응용

const CANVAS_WIDTH = 800;
const CANVAS_HEIGHT = 800;

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

// leftTop => 0,0
//ctx.beginPath()
//setTimeout(()=>{ctx.fill();},5000)

const colors = [
    "#ff3838",
    "#ffb8b8",
    "#c56cf0",
    "#ff9f1a",
    "#fff200",
    "#32ff7e",
    "#7efff5",
    "#18dcff",
    "#7d5fff",
  ];

ctx.lineWidth = 2;
let x_coord = 0;
let y_coord = 0;

function onMove(event) {
    console.log(event);
    ctx.beginPath();
    ctx.moveTo(x_coord, y_coord);
    const color = colors[Math.floor(Math.random() * colors.length)];
    ctx.strokeStyle = color;
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
}

function onCursorMoveClick(event) {
    x_coord = event.offsetX; //마지막으로 찍힌 마우스 x좌표 값
    y_coord = event.offsetY;
    console.log(event);
    ctx.beginPath();
    ctx.arc(x_coord, y_coord, 5, 0, 2*Math.PI);
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    ctx.fill();
    //ctx.lineTo(event.offsetX, event.offsetY);
    //ctx.stroke();
}
canvas.addEventListener("mousemove", onMove); //마우스가 움직일 때 마다 선이 생겨남 
canvas.addEventListener("click", onCursorMoveClick); //마우스가 움직인 마지막 시점 부터 선이 이어짐

 

 

 

 

 

 

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

const CANVAS_SIZE = innerWidth * 0.4;

canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;

ctx.lineWidth = 2;

const colors = [
'#c56cf0',
'#ffb8b8',
'#ff3838',
'#ff9f1a',
'#ff9f1a',
'#fff200',
'#32ff7e',
'#7efff5',
'#18dcff',
'#7d5fff',
'#4b4b4b',
];

const beginPoint = {
x: Math.random() * CANVAS_SIZE,
y: Math.random() * CANVAS_SIZE,
};

function onMove({ offsetX, offsetY }) {
ctx.beginPath();
ctx.moveTo(beginPoint.x, beginPoint.y);
ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)];

ctx.lineTo(offsetX, offsetY);
ctx.stroke();
}

function onClick({ offsetX, offsetY }) {
beginPoint.x = offsetX;
beginPoint.y = offsetY;
}

canvas.addEventListener('mousemove', onMove);
canvas.addEventListener('click', onClick);

 

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

canvas {
    width: 40%;
    aspect-ratio: 1/1;
    border: 2px solid black;
}

 

 

 

 

---

 

 

마우스를 클릭해서 그리기 (mouseDown, mouseUp)

 

 

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

const CANVAS_WIDTH = 800;
const CANVAS_HEIGHT = 800;

canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
ctx.lineWidth = 2;
let isPainting = false; //마우스의 현재 상태

function onMove(event){
    //마우스가 클릭 된 상태라면 브러시의 움직임을 따라 라인을 그린다 <-> false라면 브러시 위치만 움직인다
    if(isPainting){
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        return; //함수 종료
    }
    ctx.moveTo(event.offsetX, event.offsetY);
}


function onMouseDown(){
    isPainting = true; //마우스가 클릭 된 상태 
}

function onMouseUp(){
    isPainting = false;
}

canvas.addEventListener("mousemove", onMove); //마우스가 움직일 때 마다 선이 생겨남 
canvas.addEventListener("mousedown", onMouseDown); 
canvas.addEventListener("mouseup", onMouseUp);

 

 

 

 

---

 

컬러 변경 & 굵기 변경

 

function onLineWidthChange(event){

    ctx.lineWidth = event.target.value;
    //console.log(event.target.value);
}

function onColorChange(event){
    ctx.strokeStyle = event.target.value;
    ctx.fillStyle = event.target.value;
    console.log(event.target.value);
}
canvas.addEventListener("mousemove", onMove); //마우스가 움직일 때 마다 선이 생겨남 
canvas.addEventListener("mousedown", startPainting); 
canvas.addEventListener("mouseup", cancelPainting); 
canvas.addEventListener("mouseleave", cancelPainting); //마우스가 그림판 밖으로 나가면 마우스다운 해제
lineWidthBar.addEventListener("change", onLineWidthChange); //브러시 굵기 변경
color.addEventListener("change", onColorChange); //컬러변경

 

 

---

컬러 옵션 추가하기

 

 

 

📌dataset 데이터셋

html요소 안에 data- 를 사용하면 원하는 것을 넣을 수 있다 (string으로!)

 

data 하이픈 뒤에 오는 이름은 개발자가 정의하고 싶은 속성명을 기재해주고 속성값을 써주면 사용자 변수가 완성 된다

ex) data-color 대신 data-potato를 넣으면 프로퍼티에 potato로 표시 된다

 

 

 

 

컬러칩 팔레트가 생겨났다

 

 

const colorOptions = document.getElementsByClassName('color_option');

 

HTMLCollection은 ArrayLike객체이고 Array가 아니기 때문에 forEach를 사용할 수 없다

따라서 colorOptions를 배열로 바꿔줘야 함

 

const colorOptions = Array.from(document.getElementsByClassName('color_option'));

 

log()일 때 확인 결과

 

 

 

 

dir()로 클릭한 컬러칩의 객체를 확인

 

 

📌console.log()와 console.dir()의 차이

console.log는 요소를 HTML과 같은 트리 구조로 출력. DOM 요소에 대해 특별한 처리를 제공

console.dir은 요소를 JSON과 같은 트리 구조로 출력. DOM JS 객체의 전체 표현을 보려고 할 때 유용

 

객체의 데이터를 보고 싶을 때는 dir, 그 외는 log로 확인하면 유용

 

 

---

 

선택한 컬러칩의 컬러명을 뽑아오기

 

console.dir()로 객체의 프로퍼티를 확인하면 내가 설정한 컬러를 확인할 수 있다

 

 

 

 

---

 

 

컨버스 채우기 & 지우개

 

//그리기,채우기 버튼
function onModeClick(event){
    if(isMode){
        const eraserValue = event.target.dataset.color;
        isMode = false;
        modeBtn.innerText = "Fill";
        eraserColor = eraserValue;
    }else{
        isMode = true;
        modeBtn.innerText = "Draw";
    }
}

//캔버스 채우기 & 지우개
let filledColor = "white"; //기본 지우개 컬러 
function onCanvasClick(){
    if(isMode){
        ctx.fillRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
        filledColor = ctx.fillStyle;
    }
};

//초기화
function onDestroyClick(){
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
}

//지우개
function onEraserClick(){
    ctx.strokeStyle = filledColor; //지우개 모드일 때는 이전에 캔버스에 채웠던 색으로 지정
    isMode = false; //채우기 모드 off
}

 

컨버스를 화이트가 아닌 컬러로 채운 뒤 지우개로 지우면 채운 색깔까지 다 지워지기 때문에

컨버스를 채워준 색으로 지우개 컬러를 설정해야 한다