JavaScript Canvas

작성중!

Canvas

캔버스는 300px * 150px 의 기본 크기를 갖는다.
css로 canvas의 width 와 heigth 를 지정해주면, canvas의 기본 크기를 단순히 늘리기 때문에

canvas태그 안에서 width와 heigth를 지정해주거나, javascript에서 canvas.width, canvas.height 를 통해서 크기들을 정해줘야 한다.

기본적인 사용법

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// type - CanvasRenderingContext2D

canvas는 출력할 컨텐츠를 생성하고 다뤄야 한다.

사각형 그리기

/** * 렌더링할 컨텐츠의 배경색 지정 **/
context.fillStyle = "rgba(200, 0, 0)";
/** * 사각형 그리기 fillRect(x, y, width, height) **/
context.fillRect = (10, 10, 50, 50);
/** * 사각형 윤곽 그리기 fillRect(x, y, width, height) **/
context.strokeRect = (5, 5, 40, 40);
/** * 사각형 크기만큼 지우기 clearRect(x, y, width, height) **/
context.clearRect = (5, 5, 40, 40);

경로 그리기