Canvas에 사각형 그리기 HTML5




Canvas에 사각형 그리기



요즘 C를 이용한 OpenGL 프로그래밍관련 공부를 하고 있다.

브라우저 내부에서도 이런 놈들이 동작하는 거겠지? -_- 라는 생각을 해본다.

 

이번에는 캔버스에 사각형을 그려내는 예제이다.

지난 예제와 비슷하며, 극도로 심플하다.

 

코드부터 본다.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="300" height="200"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 

  //(20, 20)을 시작점으로, 너비 100px 높이 50px인 사각형을 그린다.
 context.strokeRect(20, 20, 100, 50);
 //-->
 </SCRIPT>

</BODY>
</HTML>

 

아. 뭐 설명할것도 없겠다.

종전과 동일하게 캔버스를 생성하고, 그리기 컨텍스트를 생성하여 캔버스위에 사각형을 그려주는 strokeRect(x, x, x, x) 함수를 이용한 예제이다. 앞서 말한대로 인자의 역할은 종전과 동일하다.

 

설명은 끝, 결과는 시작

 

위의 이미지는 크롭

 

 

보시다시피 파이어폭스.

이번에도 IE7은 모른척 한다. 나쁜것.

IE8 설치하기 시른데...


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210