Day8 - Fun with HTML5 Canvas

주제: canvas에다가 그림그리기

🧑‍💻 강의영상

배운 거

1. getContext: 렌더링 컨텍스트와 그리기 함수들을 사용할 수 있음
2. strokeStyle: 선 색깔
3. lineCap: 선 끝부분 스타일
4. lineJoin: 선 꺾이는 부분 스타일
5. hsl(색깔, 채도, 밝기)
   - 색깔은 0 ~ 360 정수
   - 채도랑 밝기는 %로
6. beginPath(): 새로운 경로를 만듦
   moveTo(x, y): 그리기 시작하는 위치
   lineTo(x, y): 그리기 끝나는 위치
   stroke(): 윤곽선을 이용해 도형을 그림

코드

HTML

  <canvas id="draw" width="800" height="800"></canvas>

JS

  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 = 50;

  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}, 70%, 70%)`;
    ctx.beginPath();
    // start from
    ctx.moveTo(lastX, lastY);
    // go to
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];

    // 색상은 0부터 360까지
    hue++;
    if (hue >= 360) {
      hue = 0;
    }

    // 선 두께가 100이상이 되면 선  두께 감소, 1이하가 되면 선 두께 증가
    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);