Canvas 개념 (MDN)
<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다.
예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있습니다.
TypeScript 를 사용하여 Canvas 그리기
사실 타입을 지정하는 것 외에는 자바스크립트로 canvas 를 그리는 것과 크게 다르지 않은 것 같다.
1. 타입 지정
canvas 의 DOM 인터페이스는 HTMLCanvasElement 이다.
코드 예제
// constructor() {} 안에 변수 선언 전에, 해당 변수에 대한 타입을 class 내에서 지정해줘야 한다.
// Typescript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전 선언하여야 한다.
class DrawingApp {
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
private paint: boolean;
private clickX: number[] = [];
private clickY: number[] = [];
private clickDrag: boolean[] = [];
constructor() {
let canvas = document.getElementById("canvas") as HTMLCanvasElement;
let context = canvas.getContext("2d");
canvas.width = this.canvas.width;
canvas.height = this.canvas.height;
context.lineCap = "round";
context.lineJoin = "round";
context.strokeStyle = "black";
context.lineWidth = 1;
this.canvas = canvas;
this.context = context;
}
}
new DrawingApp();
구현 결과
참고 자료
타입스크립트로 canvas 그리기 연습 예제가 잘 정리된 곳
https://kernhanda.github.io/tutorial-typescript-canvas-drawing/
타입스크립트로 class 어떻게 사용해야 하는지 자세히 설명된 곳
https://poiemaweb.com/typescript-class
canvas 튜토리얼 (MDN)
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
canvas 튜토리얼. 예제가 매우 다양 (w3school)
https://www.w3schools.com/html/html5_canvas.asp
HTMLCanvasElement 설명
http://www.devdic.com/javascript/reference/dom/interface:925/HTMLCanvasElement
window.requestanimationframe() 설명 (MDN)
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
댓글