arc(x, y, radius, startAngle, endAngle, anticlockwise) | |||
x,y | 원의 중심점 | ||
radius | 원의 반지름 | ||
startAngle | 원을 그릴 선의 시작 점 (기준 0도 는 3시) | ||
endAngle | 선의 끝 | ||
anticlockwise | 선의 방향 (false = 시계방향, true = 반시계 방향 | ||
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 원 그리기 </title>
<script type="text/javascript">
function arc()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.beginPath();
context.arc(120,120,100,0,360*Math.PI/180,false);
context.stroke();
context.beginPath();
context.arc(350,120,100,90*Math.PI/180,360*Math.PI/180,false);
context.stroke();
context.beginPath();
context.arc(350,120,100,90*Math.PI/180,360*Math.PI/180,true);
context.fill();
context.beginPath();
context.arc(570,120,100,90*Math.PI/180,360*Math.PI/180,false);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(570,120);
context.arc(570,120,100,90*Math.PI/180,360*Math.PI/180,true);
context.closePath();
context.fill();
context.beginPath();
context.arc(350,350,100,90*Math.PI/180,360*Math.PI/180,true);
context.fill();
context.beginPath();
context.moveTo(570,350);
context.arc(570,350,100,90*Math.PI/180,360*Math.PI/180,true);
context.closePath();
context.fill();
}
</script>
</head>
<body onload="arc();">
<canvas id="canvas" width="700" height="500"
style="border:solid 1px #000000">
canvas 사용하기
</canvas>
</body>
</html>
'IT > 언어' 카테고리의 다른 글
| DAO는 1:1 이어야 하나 토론! (0) | 2013.11.26 |
|---|---|
| HTML 5 신규 element 정리 (0) | 2013.11.26 |
| canvas 다각형 그리기 (0) | 2013.11.26 |
| canvas 선그리기 (0) | 2013.11.26 |
| canvas 사용하기 (0) | 2013.11.26 |