8. Fun with HTML Canvas ( JavaScript30 )

Dev/JavaScript30

8. Fun with HTML Canvas ( JavaScript30 )

takeU 2021. 7. 8. 18:53

Fun with HTML5 Canvas

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
</head>
<body>
    <canvas id="draw" width="800" height="800"></canvas>
<script>
</script>
<style>
  html, body {
    margin:0;
  }
</style>
</body>
</html>

목표

제목 그대로 HTML에 캔버스를 만들어 각종 효과를 넣어보는 연습

과정

그리기 효과를 사용하기 위한 기본 설정
그리기 효과를 실시간으로 변경하기 위한 변수 설정
그리기 효과를 실시간으로 변경하기 위한 함수 작성
그리기 효과를 실시간으로 바꾸는 함수 실행

코드 분석

1. 그리기 효과를 사용하기 위한 기본 설정

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;

canvas에 id가 draw인 요소들을 담고, ctx에 canvas의 그리기 대상이 되는 context를 얻음
width와 height를 브라우저에 표현되도록 뷰포트 폭을 받고서
strokeStyle - 윤곽선의 색깔, lineJoin - 두 선이 만나는 지점의 모양,
lineCap - 선의 끝 모양, lineWidth - 선의 두께 설정

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

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;

isDrawing - 현재 그림을 그리고 있는지 없는지 여부를 나타내며 기본값은 false,
lastX - 시작지점의 x좌표 0,lastY - 시작 지점의 y좌표 0,
hue - 기본 색상을 처음에 0으로 설정, direction - 굵기를 정하는 방향을 true,false로해서 기본값 true로 설정

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

const draw = e => {
  if (!isDrawing) return; // stop the fn from running when they are not moused down

  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];

  hue++;
  if (hue >= 360) {
  hue = 0;
  }
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
  direction = !direction;
  }

  if (direction) {
  ctx.lineWidth++;
  } else {
  ctx.lineWidth--;
  }
}

data()라는 함수에 e(event) 인자를 주고,
첫 줄은 만약 그리기가 이루어지지 않을 때 return;을 반환해 다음 코드가 실행되지 않도록 함
strokeStyle로 윤곽선의 색상을 설정해주는데 이때 hue라는 변수로 값을 계속 바꿔줌
beginPath()로 선의 시작점, moveTo(lastX, lastY)로 그리기 시작할 좌표,
lineTo(e.offsetX, e.offsetY)로 그리기 종료 지점 좌표를 지정해주고
stroke()로 시작점부터 종료 지점까지를 이어준다.
여기서 hue++은 이벤트가 한번 일어날때 마다 hue값이 1씩 증가하는다는 뜻이고
hue가 360이상이 되면 0으로 초기화를 시켜줘서 계속 반복되도록 한다.
즉, 색상이 그림을 그려 움직일때마다 계속 바뀐다
아래는 선의 굵기가 100이상 또는 1이하일때 direction을 true, false로 변경해
조건문으로 direction이 true이면 굵기가 두꺼워지고, false이면 굵기가 얇아지게 해준다

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);

마우스를 누르면(mousedown) isDrawing이 True, 즉 그리기 효과가 시작된다
마우스가 움직이면(mousemove) draw 함수가 실행
마우스를 떼거나(mouseup),마우스가 뷰포트를 떠나면(mouseout) isDrawing이 False, 즉 그리기 효과가 끝난다.

찾아본 내용, 알게된 내용들

canvas.getContext('2d') - canvas에 그리기 대상을 찾는 함수
innerWidth - 뷰포트의 폭을 받는 메소드, height는 높이를 받는 메소드
moveto(),lineto() - 그리기 효과를 시작하는 점과 종료하는 점의 좌표를 작성
각종 마우스 효과들

저작자표시 비영리 변경금지

현재글8. Fun with HTML Canvas ( JavaScript30 )

takeU