hyunwkim

Javascript30 - Day8 HTML canvas

  • 2021년 09월 20일

주제설명

html canvas를 JS를 활용하여 그림판 만들기

결과물

See the Pen by hyunwk (@hyunwk) on CodePen.

JS

	  const canvas = document.querySelector('#draw');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const ctx = canvas.getContext('2d');
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.font = '100px gothic';
    ctx.fillText('HTML canvas', window.innerWidth / 3, window.innerHeight / 8);

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

    const draw = (e) => {
      if (!isDrawing) return;

      ctx.strokeStyle = `hsl(${hue++}, 100%, 50%)`;
      if (hue >= 360) hue = 0;
      ctx.lineWidth = hue / 10;

      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      [lastX, lastY] = [e.offsetX, e.offsetY];
      ctx.stroke();
    };

    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => isDrawing = false);

설명

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

#draw인 canvas태그를 선택하고 2d로 그릴 것이기 때문에에 ‘2d’로 렌더링 컨텍스트 타입을 지정한다.


    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => isDrawing = false);

event type에 mousedown을 지정해서 마우스를 누를 경우에만 isDrawing 변수를 true로 지정하였고 마우스 누르지 않으면 mouseup type에서 isDRawing 변수를 false로 지정했다.

따라서 mousemove 이벤트에서 마우스를 누를 경우에만 draw 함수가 실행되게 하였다. 

 if (!isDrawing) return;

  ctx.strokeStyle = `hsl(${hue++}, 100%, 50%)`;
  if (hue >= 360) hue = 0;
  ctx.lineWidth = hue / 10;

  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  [lastX, lastY] = [e.offsetX, e.offsetY];
  ctx.stroke();
};

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);

ctx.strokeSTyle에서 hsl로 색을 지정하였다. hsl은 0~360값으로 색상을 지정하는 형식이다. (0:r, 120:g, 240:b) ctx.lineWidth에서 굵기를 정했는데 hsl 값을 활용하였다.

beginPath()에서 그리기를 시작하고 moveTo()를 시작점, lineTo()를 두번째 점으로 그 사이를 연결하는 선을 stroke()에서 그린다.

HTML CSS

<canvas id="draw" width="800" height="800"></canvas>
  <style>
    html,
    body {
      margin: 0;
    }
  </style>
    © hyunwkim 2021,