Day 8 - Fun with HTML5 Canvas

Result

See the Pen JS30 - Day 8 by Jeon Jin Heo (@zinirun) on CodePen.

* 마우스 오른쪽 클릭: 그림 리셋하기

Full script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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();
  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;
  }

  if (direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }
}
canvas.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
});
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));

canvas

이번 과제는 canvas의 메소드, 속성만 잘 사용한다면 문제없이 해결할 수 있었다.

canvas 그리기

  • strokeStyle 말 그대로 그리기 스타일(색상)을 지정한다.
  • beginPath() 새로운 경로를 만든다.
  • moveTo() 스트로크의 시작점이다.
  • lineTo() 스트로크의 끝점이다.
  • stroke() 스트로크의 경로(시작점, 끝점)를 잇는다.

간단하게 이해하면, beginPath()와 stroke()안에 시작 좌표 moveTo(), 끝 좌표 lineTo()를 통해 점을 선으로 이어서 “그림을 그리는” 개념이 된다고 생각하면 된다.

canvas 비우기

canvas 비우기는 과제를 응용하며 찾아본 내용이다. 나는 오른쪽 클릭을 이벤트로 캔버스를 초기화했는데,

1
2
3
4
5
canvas.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
});

contextmenu가 우클릭 이벤트이고, e.preventDefault()로 기본 우클릭 상자가 안보이게 한다.

이후 clearRect()와 beginPath()를 호출함으로써 캔버스를 초기화시킬 수 있다.