js challenge day 8

HTML5 Canvas

 

Code

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

    const draw = (e) => {
      if (!isDrawing) return;
      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
      ctx.beginPath();

      //선이 시작될 좌표
      ctx.moveTo(lastX, lastY);

      //선이 끝나는 좌표
      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;
      direction ? ctx.lineWidth++ : 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>

 

배운 점 & 느낀 점

canvas api를 처음 사용해보았습니다.

js로 이런 그림까지 그릴 수 있다는게 신기했습니다.