[html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교

HTML5 : Canvas

canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다.

먼저 html 문서에 다음과 같이 <canvas> 를 삽입한다.

<canvas id="test" width="150" height="150"></canvas>

위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다.

 

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

 

캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다.

beginPath(); 도형을 그리기 전에 지정해줌

closePath() : 도형의 시작점과 끝 점 사이에 직선을 그어 완성된 도형으로 만들어줌

fill() : 주어진 도형의 path를 채워줌 use with fillStyle

moveTo() : 선을 그리지 않고 좌표를 이동시킨다.

stroke() : 윤곽선을 이용하여 선을 그을 수 있게 해준다.

strokeStyle : 윤곽선의 스타일을 지정해준다.

lineTo(x, y) : 현재 위치에서 지정핸 위치까지 선을 그린다.

원

arc(x, y, radius, startAngle, endAngle, direction) : 원을 그려줌

⇒ 주의할 점 startAngel 및 endAngle은 x * Math.PI를 통해 지정해 주어야 하며 direction 의 경우 clockwise 또는 anticlockwise로 지정해 주어야 함

context.arcTo(x1,y1,x2,y2,r) : 곡선을 그릴 수 있게 됨

사각형

fillRect(x, y, width, height) : 안이 채워진 사각형을 만들어준다.

strokeRect(x, y, width, height) : 윤곽선이 채워진 사각형을 만들어준다.

clearRect(x, y, width, height) : 부모 요소의 채워진 사각형에서 지정한 부분 만큼을 지워준다.

마우스 그림 그리는 예제

import "./styles.css";

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

const height = (canvas.height = window.innerHeight);
const width = (canvas.width = window.innerWidth);

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

let mouseClicked = false;

document.addEventListener("click", onMouseClick, false);
document.addEventListener("mousemove", onMouseMove, false);

function onMouseClick(e) {
  mouseClicked = !mouseClicked;
}

function onMouseMove(e) {
  if (mouseClicked) {
    context.beginPath();
    context.arc(e.clientX, e.clientY, 7.5, 0, Math.PI * 2, false);
    context.lineWidth = 5;
    context.strokeStyle = getRandomColor();
    context.stroke();
  }
}

왜 Canvas를 사용하는가?

canvas 요소의 성능이 좋은 부분 : 화면이 작고, 픽셀 수가 많을 경우 (>10k)

• Ray tracing 3D graphics.
• Drawing a significant number of objects on a small surface (지도 도트)

svg 요소

• 화면이 크고 픽셀 수가 적을 경우(<10k)

Canvas를 사용 불가능 한 부분

• 스케일이 큼, 접근성 좋아야 할 때 (자바스크립트 사용 불가할 때 사용 불가능)
• 대체 텍스트 제공 방법 있긴 한데...(참고[https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility])

Canvas Event

현재 canvas 에서 input 된 요소를 fillText 를 통해 그리도록 하는 이벤트를 제작하던 도중 자바스크립트의 keyup 이벤트가 글자 지워짐에 반응하지 않는 것을 발견하였다. 아마 그리고 끝인 듯..?

✋jQuery와 VanilaJS 사이의 keyup 이벤트가 다른가? 아니면 내가 Canvas 이벤트를 잘못 짠건가?