_CurveTo.htm 문서 소스:
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 canvas - arc 베지에 곡선</title>
<meta charset="utf-8">
<style type="text/css">
#myCanvas { border:1px solid red; }
</style>
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 캔버스에 대한 컨텍스트 개체 생성
var ctx = document.getElementById('myCanvas').getContext('2d');
// Control Point 1개
ctx.beginPath(); // 그림 그리기 시작
ctx.moveTo(100, 100); // 시작점
ctx.quadraticCurveTo(250, 25, 400, 100); // 조절점, 끝점
ctx.stroke(); // 테두리 그리기
// Control Point 2개
ctx.beginPath();
ctx.moveTo(100, 300); // 시작점
ctx.bezierCurveTo(200, 200, 300, 200, 400, 300); // 조절점1, 조절점2, 끝점
ctx.stroke();
});
</script>
</head>
<body>
<canvas id="myCanvas" height="480" width="640">
</canvas>
</body>
</html>
IE9에서의 실행 결과:
