[miniProjects] 22_Drawing App

22_Drawing App

💻 주제 : 캔버스 요소를 사용한 드로잉.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

const canvas = document.getElementById('canvas');
const increaseBtn = document.getElementById('increase');
const decreaseBtn = document.getElementById('decrease');
const sizeEL = document.getElementById('size');
const colorEl = document.getElementById('color');
const clearEl = document.getElementById('clear');

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

let size = 10;
let isPressed = false;
colorEl.value = 'black';
let color = colorEl.value;
let x;
let y;

canvas.addEventListener('mousedown', (e) => {
    isPressed = true;

    x = e.offsetX;
    y = e.offsetY;
})

document.addEventListener('mouseup', (e) => {
    isPressed = false;

    x = undefined;
    y = undefined;
})

canvas.addEventListener('mousemove', (e) => {
    if(isPressed) {
        const x2 = e.offsetX;
        const y2 = e.offsetY;

        drawCircle(x2, y2);
        drawLine(x, y, x2, y2);

        x = x2;
        y = y2;
    }
})

function drawCircle(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
}

function drawLine(x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = color;
    ctx.lineWidth = size * 2;
    ctx.stroke();
}

function updateSizeOnScreen() {
    sizeEL.innerText = size;
}

increaseBtn.addEventListener('click', () => {
    size += 5;

    if(size > 50) {
        size = 50;
    }

    updateSizeOnScreen()
})

decreaseBtn.addEventListener('click', () => {
    size -= 5;

    if(size < 5) {
        size = 5;
    }

    updateSizeOnScreen();
})

colorEl.addEventListener('change', (e) => color = e.target.value);

clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height));

// drawCircle(100, 200);
// // X축 300을 시작으로 Y축에서 300을 내리고 300-500만큼 간다. 
// drawLine(300, 300, 300, 500);

• canvas 변수는 document.getElementById('canvas')를 통해 canvas요소를 가져온다. increaseBtn, decreaseBtn, sizeEL, colorEl, clearEl은 각각 'increase', 'decrease', 'size', 'color', 'clear' ID를 가진 요소들을 가져옵니다. ctx 변수는 canvas.getContext('2d')를 통해 2D 그래픽 컨텍스트를 가져온다.
• size 변수는 그리기 도구의 크기를 나타내는 값으로 초기값은 10으로 설정된다.
• isPressed 변수는 마우스 버튼이 눌려있는지 여부를 나타내는 플래그다. colorEl의 초기값은 'black'으로 설정되며, color 변수는 현재 선택된 색상 값을 저장한다. x와 y 변수는 현재 마우스의 X 좌표와 Y 좌표를 저장한다.
• canvas에는 'mousedown', 'mouseup', 'mousemove' 이벤트 리스너가 등록되어 있다. 마우스를 누르고 있을 때('mousedown') isPressed를 true로 설정하고, 현재 마우스의 좌표를 x와 y에 저장한다. 마우스를 놓았을 때('mouseup') isPressed를 false로 설정하고, x와 y를 초기화한다. 마우스를 움직일 때('mousemove') isPressed가 true인 경우에만 그리기 동작을 수행하며, 현재 좌표와 이전 좌표를 이용하여 원과 선을 그린다.
• drawCircle 함수는 주어진 좌표에 원을 그리는 함수다. drawLine 함수는 주어진 두 좌표를 연결하는 선을 그리는 함수다.
• updateSizeOnScreen 함수는 화면에 현재 도구 크기를 업데이트하여 보여준다.
• 'increaseBtn'과 'decreaseBtn'은 각각 클릭 이벤트 리스너가 등록되어 있으며, 도구 크기를 증가 또는 감소시키고 updateSizeOnScreen 함수를 호출하여 화면에 크기를 업데이트한다.
• 'colorEl'은 'change' 이벤트 리스너가 등록되어 있으며, 선택된 색상 값을 color 변수에 업데이트한다.
• 'clearEl'은 클릭 이벤트 리스너가 등록되어 있으며, 캔버스를 지우는 기능을 수행한다.