<%@ 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");
// 그림을 그리자!
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(50, 50, 200, 200);
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.fillRect(100, 100, 200, 200);
</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 #2 삼각형 그리기 (0) | 2013.02.20 |