<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=320, user-scalable=no" />
<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 = "#f0f0f0";
ctx.fillRect(0, 0, 300, 300);
// 베지어 곡선 그리기
// 패스설정
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(100, 280, 180, 280, 280, 20);
// 그리기
ctx.strokeStyle = "#0000ff";
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
'html5' 카테고리의 다른 글
| canvas #10 화상 Image 그리기(이미지 잘라내서 크기조절해서 붙이기) (0) | 2013.02.22 |
|---|---|
| canvas #10 화상 Image 그리기 (0) | 2013.02.22 |
| canvas #6 원뿔 그리기 (0) | 2013.02.21 |
| canvas #5 랜덤하게 그리기 (0) | 2013.02.21 |
| canvas #4 아크 그리기 (0) | 2013.02.20 |