[JavaScript30/Day-8] Fun with HTML5 Canvas

HTML5 Canvas는 사용해본 적이 없어서 오래 걸렸다. (답안지의 도움을 많이 받음)

How?

일단 마우스를 드래그할 때마다 Canvas에 그림이 그려져야 하고
이때 그려지는 그림은 색과 굵기(?)가 변경된다. 
캔버스를 먼저 생성하고!
마우스 클릭한 상태일 때, 그리기 이벤트 생성!
마우스 드래그한 상태일 때, 그리기 이벤트 실행!
마우스 클릭을 땔 때, 그리기 중지 이벤트 생성!
마우스가 캔버스를 벗어났을 때, 그리기 중지 이벤트 생성!
.... 

Solution

<script>
// 캔버스 select
const canvas = document.getElementById('draw'); 
const ctx = canvas.getContext('2d'); 

// canvas사이즈를 document 크기만큼 지정
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

// 도형의 stroke 컬러
ctx.strokeStyle = '#BADA55';
// stroke의 꺾이는 부분
ctx.lineJoin = 'round'; // option : bevel, miter
// stroke의 끝 부분
ctx.lineCap = 'round'; // option : square, butt
// stroke의 굵기
ctx.lineWidth = 10;

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

function click(e){
  isDrawing = true;

  //시작점
  // lastX = e.offsetX
  // lastY = e.offsetY ㄹ
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function draw(e){
  // 마우스 땠을 때나, 캔버스를 벗어났을 때 return
  if(!isDrawing)return;

  // 선 그리기 시작알림
  ctx.beginPath();
  // start from (시작점)
  ctx.moveTo(lastX, lastY);
  // go to (마우스가 있는 위치의 x,y 절대값 까지);
  ctx.lineTo(e.offsetX, e.offsetY);
  // draw!
  ctx.stroke();
  // 0,0 이였던 값이 마지막으로 그려진 마우스의 x,y 위치 절대값으로 변경
  [lastX, lastY] = [e.offsetX, e.offsetY];

  // hue 값 변경
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  hue++;

  if(ctx.lineWidth >= 50 || ctx.lineWidth <= 1){
    lineDirection = !lineDirection; // true 일땐 false로, false일 땐 true로
  }

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


document.addEventListener('mousedown', click) // 캔버스에 마우스 클릭했을 때
document.addEventListener('mousemove', draw) // 캔버스에서 마우스 움직일 때 = 드래그 할때
document.addEventListener('mouseup', ()=> isDrawing = false) // 캔버스에서 마우스 땠을 때
document.addEventListener('mouseout', ()=> isDrawing = false) // 캔버스에서 마우스가 벗어났을 때
</script>

 

• 구조 분해 할당
  • x=10, y=10을 [x, y]=[10,10]으로!
• 마우스 이벤트
  
  • mouse 드래그 이벤트는 따로 없고 mousemove를 이용!
• offsetX, offsetY
  • 특정 영역의 절댓값 좌표