[Canvas] canvas를 이용한 좌표계 그리기

웹 & 안드로이드/HTML5|2014. 6. 3. 21:20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #000000;">
    </canvas> 
    <script type="text/javascript">
    
    function Coordinate(width, height, scaleToPixel){
        
        var pixel = scaleToPixel || 1;
        width = width || 500;
        height = height || 500;
        
        var canvas = document.getElementById("canvas");
        canvas.width = width;
        canvas.height = height;
        var context = canvas.getContext("2d");
        
        init();
        function init(){
            line(-width/2, 0, width/2, 0);
            line(0, -height/2/pixel, 0, height/2/pixel);
            
            text(-width/2/pixel, -10/pixel, parseInt(-width/2/pixel) + ", 0");
            text((width-55)/2/pixel, -10/pixel, parseInt(width/2/pixel) + ", 0");
            
            text(5/pixel, (-height+5)/2/pixel, "0, " + parseInt(-height/2/pixel));
            text(5/pixel, (height-20)/2/pixel, "0, " + parseInt(height/2/pixel));
            
            text(2.5/pixel, -10/pixel, "0");
        }
        
        this.allReset = function reset(){
            canvas.width = canvas.width;
        }
        
        this.drawLine = line; 
        function line(startX, startY, endX, endY){
            //console.log(startX, startY);
            
            context.beginPath();
            context.moveTo(dx(startX), dy(startY));
            context.lineTo(dx(endX), dy(endY));
            context.closePath();
            context.stroke();
        }
        
        this.drawText = text;
        function text(x, y, text, fontSize){
            context.beginPath();
            context.font = (fontSize || 10)+"px Arial";
            context.fillText(text, dx(x), dy(y));
        }
        
        function dx(x){
            return (x * pixel + width/2);
        }
        function dy(y){
            return (-y * pixel + height/2);    
        }
        
    }
    
    window.onload = function(){
        
        var maxX = 501, maxY = 501;
        var pixel = 100;
        var c = new Coordinate(maxX, maxY, pixel);
        var i = -maxX / 2 / pixel;
        f = setInterval(function(){
            var u = 0.1;
            c.drawLine(i, Math.sin(i), i+u, Math.sin(i+u));
            i += u;
            //console.log(i+", "+Math.sin(i) +" : "+ (i+u)+", "+ Math.sin(i+u));
            if(i * pixel >= maxX/2){
                clearInterval(f);
            }
        }, 20);
        
    }
    
    </script>
</body>
</html>

 

canvas를 이용하여 만든 좌표계 객체로 사인파를 그려본 것.

저작자표시 비영리 변경금지

'웹 & 안드로이드 > HTML5' 카테고리의 다른 글

websocket 정리(작성중..)  (0) 2014.07.08
label 태그를 이용하여 폼 컨트롤 다루기.  (0) 2014.06.09
[Canvas] 연습  (0) 2014.06.02
[Javascript] let - 변수 스코프를 조절하는 키워드.  (0) 2014.05.29
[에러].submit() is not function - form 객체 submit()이 안될 때  (1) 2014.05.18

댓글()

티스토리툴바