6. html5 캔버스

HTML5에 처음 도입된 것으로 종이에 그림을 그리듯 화면위에 도형이나
직선을 편리하게 그리기 위해 만들어진 것
CANVAS태그는 그 자체가 그래픽이 아니라 그래픽이 그려질 영역이다.

그래픽이 그려질 영역

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="m" idth="500“ height="300"></canvas>
</body>
</html> 도형을 그릴 영역 정의

<!DOCTYPE HTML>
<html>
<head>
<script type=“text/javascript">
function draw_m( ) {
도형을 그리는 함수 정의
}
</script>
</head>
<body>
<canvas id="m" width="500“ height="300"></canvas>
</body>

<!DOCTYPE HTML>
<html>
<head>
<script type=" text/javascript ">
function draw_m( ) {
var m_canvas = document.getElementById("m");
var m_ctx = m_canvas.getContext("2d");
m_ctx.fillRect (10, 10, 100, 100);
m_ctx.fillStyle = "rgb(200,0,0)";
}
</script>
</head>
onload 이벤트와 함께 함수 실행
<body onload="draw_m( )“>
<canvas id="m" width="500“ height="300"></canvas>
</body>

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script tyle="text/javascript" src="js/excanvas.js"></script>
<script type="text/javascript">
function draw_m(){
var mCanvas = document.getElementById("m");
if(mCanvas.getContext){//canvas의 객체를 만들수 있는지 없는지 브라우저 체크
var ctx = mCanvas.getContext("2d");
ctx.fillStyle="rgb(200,0,0)";
ctx.fillRect(10,10,150,150);
ctx.fillStyle="rgb(0,0,200)";
ctx.fillRect(160,10,150,150);

ctx.fillStyle="green";
ctx.fillRect(10,160,150,150);
ctx.fillStyle="skyblue";
ctx.fillRect(160,160,150,150);

ctx.globalAlpha=0.4;
ctx.beginPath();
ctx.arc(160,160,100,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.fill();
ctx.beginPath();
ctx.arc(160,160,60,0,Math.PI*2,true);
ctx.fillStyle="blue";
ctx.fill();
}

• 구글에서 제공하는 ExplorerCanvas 라이브러리를 사용한다.

• ExplorerCanvas 다운로드 :

http://code.google.com/p/explorercanvas/

사용법

<html>
<head>

…

http://www.20thingsilearned.com/en-US/html/3

http://slides.html5rocks.com/#canvas-2d

http://mrdoob.com/projects/harmony/

6. html5 캔버스

More Related Content

Similar to 6. html5 캔버스

More from 은심 강

6. html5 캔버스