HTML5-Shapes/shapes.html at master · arthiel/HTML5-Shapes · GitHub

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
    var t=0;
    var frameInterval= 1000;
    var canvas = null;
    var context = null;

    var count = 0;
    var rootCircle = null;
    var nodeCircle = null;
    var lineConnect = null;
    var largeRadius = 150;
    function Circle(x, y, radius){
        console.log("CIRCLE!");
        this.x=x;
        this.y=y;
        this.radius=radius;
    }

    function connecting(startx, starty, endx, endy){
        this.startx=startx;
        this.starty=starty;
        this.endx=endx;
        this.endy=endy;
    }

    function init() {
        canvas = document.getElementById("myCanvas");
        context=canvas.getContext("2d");

        initStageObjects();
        drawStageObjects();
        updateStage();
    }

    function initStageObjects(){
        rootCircle=new Circle(250,250,70);
        nodeCircle=new Circle(500,100,40);
        lineConnect= new connecting(rootCircle.x,
                rootCircle.y,nodeCircle.x-nodeCircle.radius,nodeCircle.y);
    }

    function updateStage() {
        t += frameInterval;
        updateStageObjects();
        clearCanvas();
        drawStageObjects();
       if(nodeCircle.x > 0){
        setTimeout(updateStage, frameInterval);
       }
    }

    function drawStageObjects(){
        console.log(nodeCircle.x);
        console.log("drawStageObjects");
        context.arc(rootCircle.x,rootCircle.y,rootCircle.radius, 0,
                    2*Math.PI,false);
        context.fillStyle="blue";
        context.fill();

        context.arc(nodeCircle.x,nodeCircle.y,nodeCircle.radius, 0,
                    2*Math.PI,false);
        context.fillStyle="red";
        context.fill();

        context.beginPath();
        context.moveTo(lineConnect.startx, lineConnect.starty);
        context.lineTo(lineConnect.endx,lineConnect.endy);

        context.strokeStyle="orange";
        context.stroke();
    }

    function updateStageObjects(){
        nodeCircle.x = rootCircle.x + 150 *  Math.cos(count * Math.PI / 6);
        nodeCircle.y = rootCircle.y + 150 * Math.sin(count * Math.PI / 6);
        count+= 1;
        lineConnect.endx = nodeCircle.x;
        lineConnect.endy = nodeCircle.y;
    }

    function clearCanvas() {
        context.clearRect(0,0,canvas.width, canvas.height);
        context.beginPath();
    }


    init();
});

</script>
<style type="text/css">
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <canvas id="myCanvas" width="700" height="578"></canvas>
</body>
</html>