letsbegin/mainfile at 77ca4e69b0941945c1fb226bdaff85daf120d55d · CodeFlowOrg/letsbegin · 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
<!DOCTYPE html>
<html>
<head>
    <title>cavas</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0px;
        }
        canvas {

        }
    </style>
</head>
<body>
        <canvas  width="400px" height="400px"id="canvas">

        </canvas>
<script>
    var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
 window.onload = function () {
    canvas.setAttribute("width",window.innerWidth+"px");
    canvas.setAttribute("height",window.innerHeight+"px");
    reDraw();
};

window.onresize =  function () {
    c.canvas.width = window.innerWidth;
    c.canvas.height = window.innerHeight;
    reDraw();
};


function reDraw() {

var arr = [];
function Circle(x,y,xv,yv,r,color) {
    this.x = x;
    this.y = y;
    this.xv = xv;
    this.yv = yv;
    this.r = r;
    this.color = color;

    this.draw = function() {
        c.beginPath();
        c.arc(this.x,this.y,this.r,0,Math.PI * 2,false);
        c.stroke();
        c.fillStyle = this.color;
        c.fill();
    }

    this.update = function() {
        if(this.x + this.r > canvas.width || this.x - this.r < 0 ) {
            this.xv = (-this.xv);
        }
        if(this.y + this.r > canvas.height || this.y - this.r < 0 ) {
            this.yv = (-this.yv);
        }
        this.x+=this.xv;
        this.y+=this.yv;
        this.draw();
    }
}

var color = ["#8E56BF","#5F3980","#BE73FF","#2F1D40","#AB67E6","#7BFFED"];
    for (var i = 0 ; i < 400 ; i++) {
        var randomR = Math.floor(Math.random() * 10);
        var randomX = Math.random() * canvas.width;
        var randomY = Math.random() * canvas.height;
        var randomXV = Math.floor(Math.random() * 4+1);
        var randomYV = Math.floor(Math.random() * 4+1);
            if(randomX < randomR*2 && randomX > canvas.width - randomR *2) {
                    var randomX = ( Math.random() * canvas.width);
            }
            if(randomY < randomR*2 && randomY > canvas.height - randomR *2) {
                    var randomY = ( Math.random() * canvas.height);
            }
        arr.push(new Circle(randomX,randomY,randomXV,randomYV,randomR,color[Math.floor(Math.random() * color.length)]))
    }


    function animate() {
        c.clearRect(0,0,canvas.width,canvas.height)
            for (var i = 0; i < arr.length; i++) {
                arr[i].update();
            }
        requestAnimationFrame(animate);
    }
    animate()
}

</script>
<marquee style: top="20px";>fly <img src="https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/final_image/animate-bird-slide-25.gif" width="200" height="200" alt="Tutorials " border="0"></marquee>
</body>
</html>