jQuery | javascript | CSS

HTML5 - 08.canvas 기본사용 : 원 (캔버스)

Godffs 2014. 2. 16. 15:49
반응형

캔버스를 이용해서 원을 그리는 예제 입니다.

원을 그리는데 사용되는 메서드는
arc()메서드를 사용해서 그립니다.

arc(x좌표, y좌표, 반경(반지름), 시작점, 끝 점, 방향)을 설정합니다.


 ex05.Circle.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    
    <canvas id="can1" width="300" height="300"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("can1");
        var cv = canvas.getContext("2d");
 
        cv.beginPath();
        cv.arc(100, 100, 50, 0, 2*Math.PI, true);
        cv.fill();
        cv.closePath();
 
    </script>
</body>
</html>
 

결과를 확인합니다.


참 쉽죠~? 끝
반응형
저작자표시 비영리 변경금지 (새창열림)