HTML5/Bezier Curve
HTML5 Bezier Curve
Soul-Learner
2014. 7. 2. 18:13
HTML5에서 베지에 곡선(Bezier Curve) 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Bezier Curve Example</title>
<style type="text/css">
canvas { border:1px solid black;}
</style>
<script type="text/javascript">
function drawBezier() {
var c = document.getElementById("canvas1");
if(!c.getContext) {
alert('Canvas그리기를 지원하는 웹브라우저가 아닙니다');
return;
}
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.bezierCurveTo(150,0, 250,200, 300,100);
//ctx.stroke();
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="400"></canvas>
<p>
<input type="button" value="Draw Bezier" onclick="drawBezier();">
</body>
</html>