[javascript30] Fun with HTML5 Canvas

하도야지·2021년 12월 3일

JavaScript30 따라하기

목록 보기

7/10

1. Fun with HTML5 Canvas

브라우저 상에 마우스를 움직여 그림을 그린다.
색이 계속해서 변경되며, 선의 굵기 또한 지속적으로 증감한다.

2. 전체 코드

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

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

    function draw(e) {
      if (!isDrawing) return;
      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--;
      }
    }

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


  </script>

  <style>
    html,
    body {
      margin: 0;
    }
  </style>

</body>

</html>

3. 동작 순서

마우스 좌클릭 시 eventListner를 통해 이벤트 감지 후, flag 및 기준점을 세팅한다.

마우스 움직일 시 eventListner를 통해 이벤트 감지 후, draw 함수를 호출한다.
2-1 draw 함수에서 선 곡선 출력에 대한 로직을 구현함

마우스에서 손 땔 시 eventListner를 통해 이벤트 감지 후, flag를 세팅한다.

4. HTML, CSS

`<canvas>`

<canvas>

2D 컨텍스트를 설정하여 그래픽적인 것을 표현하기 위해 사용하는 태그
<canvas id="tutorial" width="150" height="150"></canvas>
HTMLCanvasElement.getContext()

캔버스의 드로잉 컨텍스트를 반환

마크업 요소를 드로잉 영역으로 세팅함
    const canvas = document.querySelector('#draw');
    const ctx = canvas.getContext('2d');
width / height : 컨텍스트의 크기 지정
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
strokeStyle : 도형의 윤곽선 색 설정
ctx.strokeStyle = '#BADA55';
lineJoin : 도형을 이루는 선이나 호등의 연결지점(모서리)의 모양을 설정

lineCap : 도형을 이루는 선이나 호등의 끝 부분의 스타일 지정
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

hsl()

html 에서 색조, 채도 및 명도 성분에 의한 소정의 색상을 표현 하는 함수

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl()

5. JAVASCRIPT

<canvas>의 함수

ctx.strokeStyle = hsl(${hue},100%, 50%)

beginPath() : 시작 경로 지정

moveTo(x, y) : 펜을 x와 y의 지정된 좌표로 옮김

lineTo(x,y) : 현재의 드로잉 ㅜ이치에서 x와 y로 지정된 위치까지 선을 그림

stroke() : 운곽선을 적용함.
      ctx.strokeStyle = `hsl(${hue},100%, 50%)`
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();