08 - Fun with HTML5 Canvas (Javascript 30)

이번 파트는 html5에 캔버스를 만들어서 그리기 효과를 만들기입니다.

 

1. 캔버스 기초 셋팅.

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');  // 렌더링 컨텍스트 타입 지정. (CanvasRenderingContext2D를 얻어온다)
canvas.width = window.innerWidth;  // 캔버스 너비를 윈도우 창 너비로 설정한다.
canvas.height = window.innerHeight;  // 캔버스 높이를 윈도우 창 높이로 설정한다.
ctx.strokeStyle = '#BADA55';  // 윤곽선 색깔
ctx.lineJoin = 'round';  // 두 선이 만나는 지점의 모양
ctx.lineCap = 'round';  // 선의 끝 모양
ctx.lineWidth = 100;  // 선의 두께 설정

 

2. 그리기 효과를 실시간으로 변경하기 위한 변수 설정.

let isDrawing = false;  // 현재 그림을 그리고 있는지 없는지 여부를 나타냄
let lastX = 0;  // 시작 지점의 x 좌표
let lastY = 0;  // 시작 지점의 y 좌표
let hue = 0;  // 기본 색상을 처음엔 0으로 설정
let direction = true;  // 선 넓이를 증가시킬것인지 감소시킬것인지 정하는 변수

 

3. 그리기 효과를 실시간으로 변경하기 위한 함수 작성.

function draw(e) {
    if (!isDrawing) return;  // 마우스가 눌리지 않을때 함수 실행을 중지
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;  // 색상을 hue 변수의 값을 증가시키면서 변경
    ctx.beginPath();  // 새로운 경로를 생성
    ctx.moveTo(lastX, lastY);  // 펜을 설정된 좌표로 이동
    ctx.lineTo(e.offsetX, e.offsetY);  // x와 y로 지정된 위치까지 선을 그린다
    ctx.stroke();  // 윤곽선을 이용하여 도형을 그린다
    [lastX, lastY] = [e.offsetX, e.offsetY];  // 마우스의 좌표를 설정

    hue++;
    if (hue >= 360) {  // hue 변수의 값이 360을 넘으면 0으로 초기화
        hue = 0;
    }
    // ctx.lineWidth는 현재 선 넓이를 픽셀 단위로 반환
    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {  // 선 넓이를 1~100으로 유지하기 위한 설정
        direction = !direction;
    }

    if(direction) {
        ctx.lineWidth++;  // 선 넓이를 증가시킨다.
    } else {
        ctx.lineWidth--;  // 선 넓이를 감소시킨다.
    }
}

 

4. 그리기 효과를 적용하기 위한 이벤트 등록.

// 캔버스에 마우스 버튼이 눌려있을때 (그림을 그리고있음으로 변경하고 시작지점을 변경한다)
canvas.addEventListener('mousedown', (e) => {
	isDrawing = true;
	[lastX, lastY] = [e.offsetX, e.offsetY];
});

// 캔버스에서 마우스 버튼을 움직였을때
canvas.addEventListener('mousemove', draw);
// 캔버스에서 마우스 버튼을 놓았을때 (그림을 그리고 있지 않음으로 변경)
canvas.addEventListener('mouseup', () => isDrawing = false);
// 마우스 포인터를 캔버스 밖으로 이동시킬때 발생되는 이벤트 (그림을 그리고 있지 않음으로 변경)
canvas.addEventListener('mouseout', () => isDrawing = false)

 

참고: https://takeuu.tistory.com/52?category=733951