DOM Canvas 시작하기

황제낙엽 2016.08.22 07:02 조회 수 : 100

sitelink1 http://blog.naver.com/shadowbug/220741243178 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

DOM

그림을 그리고자 하는 위치에 canvas 엘리먼트를 선언한다.

canvas 엘리먼트 역시 DOM 엘리먼트이므로 CSS, javascript에서 모두 검색이 가능하다.

<body onload="draw()">

....

 <canvas id="draw" width="150px" height="150px" />

....

</body>

 

javascript 

canvas의 99%는 모두 자바스크립트로 처리된다.

앞으로 html의 canvas엘리먼트에 대한 코드는 특별한 경우가 아닐 경우 모두 생략될 예정이다.

  function draw(target) {

var canvas = document.getElementById("draw");

 

// 지원 여부 체크

if(canvas.getContext) {

// HTML5에서 canvas를 지원시

 

// 그리기 오브젝트를 받음

var ctx = canvas.getContext('2d');

 

// 그리기

ctx.fillStyle = "rgb(255, 0, 0)";

ctx.fillRect(10, 10, 90, 90);

}

 }

 

스크린샷_2016-06-20_오후_4.55.32.png

canvas로 그려지는 그림은 최대 canvas 엘리먼트의 크기만큼 출력되며,

canvas 엘리먼트의 좌상단을 기준으로 (0, 0)이 설정되며 우하단으로 갈수록 좌표크기가 커지는 구조이다.

 

 

결과

아래와 같이 사각형이 뜬다면 올바르게 작성된 프로그램이다.

 

스크린샷_2016-06-20_오후_4.53.10.png

 

이 게시물을
목록
쓰기 태그