Javascript Canvas 선, 사각형, 글 그리기 함수

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(r,g,b)"; // fill이 들어가는 색상을 바꿀 수 있습니다.

ctx.beginPath(); // 선을 그릴때 시작하는 함수
ctx.moveTo(x, y); // 선의 시작점
ctx.lineTo(x, y); // 선의 끝점
ctx.stroke(); // 현재까지 설정한 그림들을 그리는 함수
ctx.closePath(); // 선을 그릴때 닫아서 시작점과 잇는 함수

ctx.strokeRect(x, y, w, h); // 선으로만 사각형을 그립니다

ctx.fillRect(x, y, w, h); // 안이 채워진 사각형을 그립니다.

ctx.clearRect(x, y, w, h); // 사각형만큼 지웁니다.

ctx.font = "15px Arial"; // 폰트를 설정합니다.
ctx.fillText("Hello World", x, y); // 글을 적습니다.

 

선을 그리는 함수, 사각형을 그리는 함수 3가지, 글을 쓰는 함수에 대하여 알아보았습니다.