# canvas 요소 활용 방법
브라우저에 그림을 그리기 위해 canvas 요소를 사용하여 그림 그릴 영역을 지정하고 실제 그림을 그리는것은 자바스크립트를 사용함.
1. 캔버스 영역 지정
형식
<canvas id="아이디" width="너비" height="높이">
지원 불가능한 브라우저에서 표현할 이미지나 텍스트
</canvas>
(너비나 높이를 지정하지 않으면 자동으로 300*200 픽셀의 캔버스가 생성됨)
2. 해당 아이디에 해당하는 캔버스를 불러와 canvas 객체를 생성하고 getContext('2d') 메서드를 호출하여 그리기 컨텍스트를 생성
형식
var 변수1 = document.getElementById('아이디');
var 변수2 = 변수1.getContext(''2d');
=> 짧게. var 변수 = document.getElemntById('아이디').getContext('2d');
예시)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> test </title>
<meta name="language" content="ko" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<script type="text/javascript">
function example(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
}
</script>
</head>
<body onload="example()">
<canvas id="canvas" width="800" height="800" style="border:1px solid red;">
이 브라우저는 html5의 canvas를 지원하지 않습니다.
</canvas>
</body>
</html>
# 사각형 그리기
형식
context.strokeRect(x,y,너비,높이); // 테두리만 있는 사각형을 그림
context.fillRect(x,y,너비,높이); // 색이 채워진 사각형을 그림
context.clearRect(x,y,너비,높이); // 특정 영역을 지움
예시)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 사각형 그리기 </title>
<script type="text/javascript">
function rect()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.strokeRect(10,10,200,200);
context.fillRect(220,10,200,200);
context.fillRect(430,10,200,200);
context.clearRect(500,50,100,100);
}
</script>
</head>
<body onload="rect();">
<canvas id="canvas" width="700" height="400" style="border:solid 1px #000000">
canvas 사용하기
</canvas>
</body>
</html>
# 선 그리기
- 선 그리기를 위한 3가지 메서드moveTo(x1, y1), lineTo(x2, y2), stroke()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 선 그리기 </title>
<script type="text/javascript">
function line()
{
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.moveTo(10,10);
canvas.lineTo(200,300);
canvas.stroke();
canvas.moveTo(100,10);
canvas.lineTo(300,300);
canvas.lineTo(300,100);
canvas.stroke();
canvas.moveTo(300,10);
canvas.lineTo(500,300);
canvas.lineTo(500,100);
canvas.moveTo(550,10);
canvas.lineTo(550,300);
canvas.stroke();
}
</script>
</head>
<body onload="line();">
<canvas id="canvas" width="700" height="400" style="border:solid 1px #000000">
canvas 사용하기
</canvas>
</body>
</html>
# 다각형 그리기
선그리기 메서드 + closePath()
closePath() : 선이 마지막으로 종료된 지점과 최초의 지점을 자동으로 연결하는 역할
context.beginPath( );
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(50, 100 );
context.closePath( );
context.stroke( );
# 원, 원호 그리기 (arc 메서드)
<형식>
context.arc(x, y, 반지름, 시작각도, 종료각도, 그리는 방향);
<예제1 - 원>
context.beginPath();
context.arc(150, 150, 100, 0, 360*Math.PI/180, false);
context.stroke();
<예제2 - 원호> : 시작각도와 종료 각도 지정
context.beginPath();
context.arc(150, 150, 100, 225*Math.PI/180, 45*Math.PI/180, false);
context.stroke();
# 부채꼴 그리기
<형식>
moveTo() + arc() + closePath()
<예제>
context.moveTo(150, 150);
context.arc(150, 150, 100, 0, 90*Math.PI/180, false);
context.closePath(); context.stroke();
# 직선과 접하는 원호 그리기
<형식>
moveTo() + arcTo()
context.arcTo(보조점x, 보조점y, 종료점x, 종료점y, 반지름);
<예제>
context.moveTo(50, 50);
context.arcTo(100, 100, 200, 50, 50);
context.stroke();
'# Work > └ html5&css3' 카테고리의 다른 글
| css3 브라우저별 지원 현황 (0) | 2014.01.21 |
|---|---|
| css selector (선택자) 의 종류와 브라우저별 지원 여부 (0) | 2014.01.21 |
| safari에서 이미지에 border + border-radius 적용시 border-radius가 제대로 적용되지 않을경우 (1) | 2013.11.21 |
| canvas 요소 2 (0) | 2013.11.13 |
| html5 속성들 (html5 오픈컨퍼런스 by 정찬명님 발표 동영상을 보고...) (0) | 2011.12.19 |
