<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Canvas Test</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
// 캔버스 객체 취득
var canvas = document.getElementById("myCanvas");
// 이미지 컨텍스트 취득
var ctx = canvas.getContext("2d");
// 그림을 그리자!
// 1. 패스(path) 시작
ctx.beginPath();
// 2. 패스 지정
ctx.moveTo(0, 0);
ctx.lineTo(0, 290);
ctx.lineTo(290, 290);
// 3. 패스 종료
ctx.closePath();
// 4. 그리기
ctx.fillStyle = "rgb(0, 0, 200)";
ctx.fill();
</script>
</body>
</html>
'html5' 카테고리의 다른 글
| canvas #6 원뿔 그리기 (0) | 2013.02.21 |
|---|---|
| canvas #5 랜덤하게 그리기 (0) | 2013.02.21 |
| canvas #4 아크 그리기 (0) | 2013.02.20 |
| canvas #3 삼각형 그리기 - 터치 이벤트 (0) | 2013.02.20 |
| canvas #1 사각형 그리기 (0) | 2013.02.20 |