javascript/javascript30
08 - Fun with HTML5 Canvas (Javascript 30)
oraclian
2019. 10. 19. 23:05
이번 파트는 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)