<canvas id="canvas" width="500" height="200"></canvas>
기본적인 스크립트 분석
<script type="application/javascript">
function draw_m(){
var m_canvas = document.getElementById("canvas");
var m_ctx = m_canvas.getContext("2d"); 1
m_ctx.fillStyle = "rgb(250,0,0)"; 2
m_ctx.fillRect(10, 10, 100), 100); 3}</script>
<body>
<canvas id="canvas" width="500" height="300"></canvas></body>
1 사각형을 그리거나 원을 그리는 등의 메서드와 프로퍼티들은 모두 드로잉 컨텍스트 안에 있습니다. 따라서 드로잉 컨텍스트의 인스턴스를 반드시 생성해야 합니다. 객체의 컨텍스트를 또다른 변수에 저장합니다.
2 도형의 CSS스타일을 지정합니다. rgb(R,G,B) 값을 사용할 수도 있고, rgba(R,G,B,알파값)를 사용할 수도 있습니다.
3 사각형을 그리기 위해 fillRect 메서드를 사용합니다. fillRect 메서드의 기본 형식은 fillRect(시작 x좌표, 시작y좌표, 너비, 높이) 입니다.
사각형 그리기
| fillRect(x,y,width,height) | 색이 칠해진 사각형을 그립니다. |
| strokeRect(x,y,width,height) | 테두리만 있는 사각형을 그립니다. |
| clearRect(x,y,width,height) | 특정 영역을 지우고 완전히 투명하게 만듭니다. |
1 (50,50)을 시작점으로 너비와 높이가 100픽셀인 채우기 사각형을 그립니다. 먼저 그린 빨간색 사각형과 겹쳐지는 투명도가 0.5이기 때문에 아래 있는 도형(빨간색 사각형)이 약간 비치게 됩니다.<script type="application/javascript">
function draw_m(){
var m_canvas = document.getElementById("canvas");
var ctx = m_canvas.getContext("2d");
ctx.fillStyle = rgb(200,0,0);
ctx.fillRect(10, 10, 100), 100);
ctx.fillStyle = "rgba(0,0,200, 0.5)";
ctx.fillRect(50,50,100,100); 1
ctx.clearRect(60,60,40,40); 2
ctx.strokeStyle="rgb(200,0,250)"; 3
ctx.strokeRect(200,50,70,150); 4}</script>
2 (60,60)을 시작점으로 너비와 높이 40픽셀만큼씩의 영역을 지웁니다. 화면에는 문서의 배경색으로 나타납니다.
3 테두리 색을 지정합니다. 지정하지 않을경우 검정색으로 표시됩니다.
4 (200,50)을 시작점으로 너비가 70픽셀이고 높이가 150픽셀인 테두리 사각형을 그립니다.
경로 그리기
| beginPath() | 경로시작 |
| closePath() | 경로종료 |
| stroke() | 경로 테두리 그리기 |
| fill() | 도형 채우기 |
| moveTo(x,y) | x,y로 위치로 시작점을 옮김 |
| lineTo(x,y) | x,y 좌표 지점까지 직선을 그림 |
| arc(x, y, r, starAngle, endAngle, anticlockwise) | 원, 호 그리기 |
arc 메서드는 (x,y)위치에서 시작해 반시계방향으로 반지름 (r)만큼의 원을 그립니다. 'starAngle'과 'endAngle' 매개변수는 호의 시작점과 끝점을 각도로 표시한 것이고, anticlockwise 매개변수는 호를 그릴 때 반시계방향으로 그릴지 여부를 참(true)과 거짓(false)으로 지정합니다.
arc 메서드의 각도는 도로 표기하지 않고 라디안(radian)값으로 표기합니다. 1라디안은 180/π 이고,
60도는 (π/180)*60라디안이 됩니다. 따라ㅅㅓ 360도는 2π라디안이 되고요 이러한 계산방법을 자바스크립트로 표현하면 아래와 같습니다.
var radians = (Math.PI/180)*degrees예제
function draw_m(){
var canvas = document.getElementById("m");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(70, 70, 20, 0,(Math.PI/180)*60,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(130, 110, 50, 0, Math.PI*2,true);
ctx.fillSyle="rgb(0,200,200)";
ctx.stroke();
ctx.beginPath();
ctx.arc(190, 70, 20, (Math.PI/180)*110,(Math.PI/180)*170,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(300, 150, 30,0,(Math.PI/180)*200,false);
ctx.fillStyle="rgb(0,200,0)";
ctx.fill();
}
Canvas.zip'HTML5' 카테고리의 다른 글
| DevOn 2011 배포된 PDF (0) | 2011.11.29 |
|---|---|
| 차세대 웹 서비스를 위한 실전 HTML5 가이드 (0) | 2011.04.06 |
| html5 Doctype 선언 및 인코딩 (0) | 2011.04.06 |