티스토리 뷰

everything

[컴][웹] javascript - Rectangle/Arc 그리기 - html5 - canvas element

koosal 2011. 2. 17. 17:35
html 5 에서 2d관련 graphic 처리를 위해 canvas 라는 element 가 추가되었다. 이 canvas 위에 javascript 로 그림을 그려서 화면에 보여줄 수 있다.

canvas element 에 대한 wiki : http://en.wikipedia.org/wiki/Canvas_element

아래 예제에 네모(rectangle) 와 호(Arc) 를 그리는 법을 알아보자.
자세한 API 설명은 아래 경로를 참조하자.

아래 코드를 copy 해서 html 로 저장하면 사각형과 원을 볼 수 있다. 여기서 원은 test 를 위해 완벽한 원을 그리지는 않았다.

대략적인 설명을 하자면, javascript 에서 canvas element에 접근해서 getContext() 로 2d 를 얻어오고, 거기에 그림을 그리게 된다. 이렇게 그려진 그림은 canvas element 범위 안에서만 보여지게 된다. 다시 말하면 아래 코드에서는 500, 500 의 사이즈내에서만 그려지게 된다.
  <canvas id="example" width="500" height="500">

arc()
그리고 arc 는 '호'를 그리는 함수로 아래와 같이 정의되어 있다.
   arc(x, y, radius, startAngle, endAngle, anticlockwise)
여기서 angle 은 radian 로 표현해야 하며, 0 도는 3시방향이다. 이 arc() 는 x,y 점에서 startAngle 방향으로 radius(반지름) 만큼 떨어진 곳에서 시작해서 endAngle 까지의 path 를 그린다. 그리고 시작점과 끝점을 직선으로 이어준다. 참고로 얘기하면, Math.PI 를 곱해줘야 한다. 기본적으로 PI 를 계산 해 주지는 않는다.


beginPath() / closePath()
beginPath : beginPath 는 subpath list 를 초기화 시켜준다. 다시 말하면, 가지고 있던 subpath 를 날리는 역할을 한다.
closepath : closepath 는 현재 subpath list 를 닫고 새로운 subpath list 를 만든다. 이 새로운 subpath list 의 시작점은 닫아버린 subpath list 의 끝점이다.
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <style type="text/css">
    a.test { font-weight: bold; }
 </style>
   
   <script type="text/javascript">

   /**/
function test(){
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
// how to draw the circle
var PI2 = Math.PI * 2;
console.log(PI2);
var context2 = example.getContext('2d');
context2.beginPath();
context2.arc( 150, 150, 100, 0, PI2/4, true ); // angle should be radians
context2.closePath();
context2.fill(); 
};
/**/
   </script>

  <body onLoad="javascript:test();" > >
<canvas id="example" width="500" height="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
  </body>
</html>

저작자표시
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함