HTML Canvas 사용하기!

canvas를 사용하는 방법에 대하여 알아보겠습니다.

 

<canvas id="myCanvas" width="500" height="500"></canvas>

위와 같은 canvas를 하나 만들어 주었습니다.

 

<style>
 #myCanvas {
 	width: 100px;
    height: 100px;
    border: 1px solid #000;
 }
</style>

스타일은 정말 간단하게 이렇게 적어두겠습니다.

 

그럼 검은선의 100x100 의 사각형 canvas가 만들어 집니다.

 

이안에 사각형을 만들어보겠습니다.

 

var meCanvas = document.getElementById('myCanvas');

if (meCanvas.getContext) { //여기서 canvas를 제대로 가져왔는지를 판별합니다.
	var ctx = meCanvas.getContext('2d');
	ctx.fillRect (10, 10, 50, 50);
    // 좌표 x: 100, 좌표 y: 100 인곳에서부터 오른쪽으로 넓이가 50인 사각형을 만듭니다.
    // 여기서 사각형은 안이 색으로 채워진 사각형입니다.
}

javascript에 이렇게 한다면 canvas를 찾는다면 제대로 동작하는것을 확인할 수 있습니다.

 

다른것도 많이 그릴수 있는데요. 그부분은 다른 글에서 다루도록 하겠습니다.

 

2020/05/28 - [HTML/JavaScript] - [ITSkeleton][Javascript] Canvas 선, 사각형, 글 그리기 함수

2020/05/28 - [HTML/JavaScript] - [ITSkeleton][Javascript] Canvas 굴곡선, 원 그리기

2020/05/29 - [HTML/JavaScript] - [ITSkeleton][Javascript] Canvas 색상, 그라데이션 스타일

2020/05/30 - [HTML] - [ITSkeleton][Javascript] canvas 선그릴때 관련 함수