frontEnd/test1.html at master · doooooota2/frontEnd · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/aui.2.0.css" />
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
    <div class="container aui-content aui-content-padded">
        <canvas id="canvas" width="1200" height="600" style="background:black;height:100%;width:100%"></canvas>
    </div>

    <script src="atom.js"></script>
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas')
            var ctx = canvas.getContext('2d')
            var words = ['测试文本1','测试文本2','测试文本3','测试文本4','测试文本5','测试文本6','测试文本7','测试文本8','测试文本9','测试文本10']
            var CW = canvas.width;
            var CH = canvas.height;
            var centerX = CW/2;
            var centerY = CH/2;

            var atoms = createAtom().reverse()

            function createAtom() {
                var atoms = []
                words.forEach(function (word) {
                    var atom = new Atom({
                        x: rand(600, 1000),
                        y: rand(50, 250),
                        text: word,
                        textColor: '#fff',
                        // bgColor: randColor(),
                        fontSize: Math.round(Math.random()*40 + 10),
                        speed: rand(1,3),
                        isNeedBg: true
                    })
                    atoms.push(atom)
                })
                return atoms
            }

            function rand(n, m) {
                return Math.random()*(m-n) + n
            }

            function randColor() {
                return '#'+Math.floor(Math.random()*0xffffff).toString(16);
            }

            function draw(atoms) {
                atoms.forEach(function(atom) {
                    atom.x -= atom.speed
                    if(atom.x < -atom.width) {
                        atom.x = rand(600, 1000)
                        atom.y = rand(50, 250)
                    }
                    atom.draw(ctx)
                })
            }

            (function drawFrames() {
                window.requestAnimationFrame(drawFrames)
                ctx.clearRect(0, 0, CW, CH)
                draw(atoms)
            })()


        }
    </script>
</body>
</html>