四、星星连线

发表于 | 更新于: | 分类于 ， |
| 字数: 1.8k | 时长 ≈ 9 分钟

四、星星连线

4.1 一个星星

4.1.1 dom

1
<canvas id="myCanvas"></canvas>

4.1.2 CSS

1
2
3
4
5
6
7
8
9
10
11
12
* {
    padding: 0;
    margin: 0;
}
body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
canvas {
    background-color: #000;
}

4.1.3 js

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
// 获取视口的宽
var width = document.documentElement.clientWidth;
// 获取视口的高
var height = document.documentElement.clientHeight;
// 获取 canvas
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");
// 赋值 canvas的宽
canvas.width = width;
// 赋值 canvas的高
canvas.height = height;
// 改变填充色
ctx.fillStyle = "white";

// 定义星星的 x 值
// parseInt() 函数可解析一个字符串,并返回一个整数
// Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机值
var x = parseInt(Math.random() * width);  
// 定义星星的 y 值
var y = parseInt(Math.random() * height);  
// 星星移动速度的 x 方向
var x_speed = .6;
// 星星移动速度的 y 方向
var y_speed = .7;
// 定义星星的半径
var r = 2;
console.log(x, y, r);

// 绘制星星
// 开启路径
ctx.beginPath();
// 绘制圆
ctx.arc(x, y, r, 0, Math.PI * 2);
// 闭合路径
ctx.closePath();
// 填充
ctx.fill();

// 开启定时器
var timer = setInterval(function(){
    // 清屏
    ctx.clearRect(0, 0, width, height);
    // 移动
    x -= x_speed;
    y -= y_speed;
    // 渲染
    // 开启路径
    ctx.beginPath();
    // 绘制圆
    ctx.arc(x, y, r, 0, Math.PI * 2);
    // 闭合路径
    ctx.closePath();
    // 填充
    ctx.fill();
}, 20);

4.2 使用面向对象的方式

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
// 获取视口的宽
var width = document.documentElement.clientWidth;
// 获取视口的高
var height = document.documentElement.clientHeight;
// 获取 canvas
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");
// 赋值 canvas的宽
canvas.width = width;
// 赋值 canvas的高
canvas.height = height;
// 改变填充色
ctx.fillStyle = "white";

// 定义 Star 类
function Star(ctx, x, y, r){
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    // parseInt(Math.random() * 3) + 1  === 1, 2, 3
    // parseInt(Math.random() * 10) + 1 === 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    // Math.pow(-1, 1~10)   -1 的 1~10 次幂
    this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1);
    this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1);
}

// 方法要写在原型上
// 移动方法
Star.prototype.move = function(){
    this.x -= this.x_speed;
    this.y -= this.y_speed;
}

// 转向 x 方法
Star.prototype.changeX = function(){
    this.x_speed = - this.x_speed;
}

// 转向 y 方法
Star.prototype.changeY = function(){
    this.y_speed = - this.y_speed;
}

// 渲染方法
Star.prototype.render = function(){
    // 开启路径
    this.ctx.beginPath();
    // 绘制圆
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    // 闭合路径
    this.ctx.closePath();
    // 填充
    this.ctx.fill();
}

// 初始化星星对象
var star = new Star(ctx, parseInt(Math.random() * width), parseInt(Math.random() * height), 2);
star.render();

// 开启定时器
var timer = setInterval(function(){
    // 清屏
    ctx.clearRect(0, 0, width, height);
    // 移动
    star.move();
    // 判断边界
    if (star.x < 0 || star.x > width){
        star.changeX();
    }
    if (star.y < 0 || star.y > height){
        star.changeY();
    }
    // 渲染
    star.render();
}, 20);

4.3 多个星星

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
// 获取视口的宽
var width = document.documentElement.clientWidth;
// 获取视口的高
var height = document.documentElement.clientHeight;
// 获取 canvas
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");
// 赋值 canvas的宽
canvas.width = width;
// 赋值 canvas的高
canvas.height = height;
// 改变填充色
ctx.fillStyle = "white";

// 定义 Star 类
function Star(ctx, x, y, r){
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    // parseInt(Math.random() * 3) + 1  === 1, 2, 3
    // parseInt(Math.random() * 10) + 1 === 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    // Math.pow(-1, 1~10)   -1 的 1~10 次幂
    this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
    this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
}

// 方法要写在原型上
// 移动方法
Star.prototype.move = function(){
    this.x -= this.x_speed;
    this.y -= this.y_speed;
}

// 转向 x 方法
Star.prototype.changeX = function(){
    this.x_speed = - this.x_speed;
}

// 转向 y 方法
Star.prototype.changeY = function(){
    this.y_speed = - this.y_speed;
}

// 渲染方法
Star.prototype.render = function(){
    // 开启路径
    this.ctx.beginPath();
    // 绘制圆
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    // 闭合路径
    this.ctx.closePath();
    // 填充
    this.ctx.fill();
}

// 定义数组 用于存放每一个星星对象
var arr = [];
// 初始化星星对象
// var star = new Star(ctx, parseInt(Math.random() * width), parseInt(Math.random() * height), 2);
// star.render();

// 创建 100 个星星
for (var i = 0; i < 100; i++){
    arr.push(new Star(ctx, parseInt(Math.random() * width), parseInt(Math.random() * height), 1));
}

// 开启定时器
var timer = setInterval(function(){
    // 清屏
    ctx.clearRect(0, 0, width, height);
    arr.forEach(function(value, index){
        // 移动
        value.move();
        // 判断边界
        if (value.x < 0 || value.x > width){
            value.changeX();
        }
        if (value.y < 0 || value.y > height){
            value.changeY();
        }
        // 渲染
        value.render();
    })
}, 20);

UYglQ0.png

4.4 星星连线

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
// 获取视口的宽
var width = document.documentElement.clientWidth;
// 获取视口的高
var height = document.documentElement.clientHeight;
// 获取 canvas
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");
// 赋值 canvas的宽
canvas.width = width;
// 赋值 canvas的高
canvas.height = height;
// 改变填充色
ctx.fillStyle = "white";
// 改变线条颜色
ctx.strokeStyle = "rgba(255, 255, 123, .4)";
// 改变线宽
ctx.lineWidth = ".3";

// 定义 Star 类
function Star(ctx, x, y, r){
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    // parseInt(Math.random() * 3) + 1  === 1, 2, 3
    // parseInt(Math.random() * 10) + 1 === 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    // Math.pow(-1, 1~10)   -1 的 1~10 次幂
    this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
    this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
}

// 方法要写在原型上
// 移动方法
Star.prototype.move = function(){
    this.x -= this.x_speed;
    this.y -= this.y_speed;
}

// 转向 x 方法
Star.prototype.changeX = function(){
    this.x_speed = - this.x_speed;
}

// 转向 y 方法
Star.prototype.changeY = function(){
    this.y_speed = - this.y_speed;
}

// 渲染方法
Star.prototype.render = function(){
    // 开启路径
    this.ctx.beginPath();
    // 绘制圆
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    // 闭合路径
    this.ctx.closePath();
    // 填充
    this.ctx.fill();
}

// 定义数组 用于存放每一个星星对象
var arr = [];
// 初始化星星对象
// var star = new Star(ctx, parseInt(Math.random() * width), parseInt(Math.random() * height), 2);
// star.render();

// 创建 100 个星星
for (var i = 0; i < 100; i++){
    arr.push(new Star(ctx, parseInt(Math.random() * width), parseInt(Math.random() * height), 1));
}

// 创建鼠标星星对象
var mouse_star = new Star(ctx, 0, 0, 1);
document.onmousemove = function(e){
    // 获取鼠标的位置
    var x = e.clientX;
    var y = e.clientY;
    // 赋值 mouse_star 对象中的 x 和 y 值
    mouse_star.x = x;
    mouse_star.y = y;
}

// 开启定时器
var timer = setInterval(function(){
    // 清屏
    ctx.clearRect(0, 0, width, height);

    // 渲染鼠标星星
    mouse_star.render();

    // 渲染每一个星星
    arr.forEach(function(value, index){
        // 移动
        value.move();
        // 判断边界
        if (value.x < 0 || value.x > width){
            value.changeX();
        }
        if (value.y < 0 || value.y > height){
            value.changeY();
        }
        // 渲染
        value.render();
    });

    // 循环判断
    arr.forEach(function(value, index){
        // value 表示每一个星星，我们应该拿着这个星星与其它所有星星作比较
        for (var i = index + 1; i < arr.length; i++){
            // Math.abs(value.x - arr[i].x)  绝对值
            if (Math.abs(value.x - arr[i].x) < 50 && Math.abs(value.y - arr[i].y) < 50){
                // 连线
                line(value.x, value.y, arr[i].x, arr[i].y);
            }
        }

        // 判断鼠标星星与其他所有星星之间的关系
        if (Math.abs(value.x - mouse_star.x) < 150 && Math.abs(value.y - mouse_star.y) < 150){
            // 连线
            line(value.x, value.y, mouse_star.x, mouse_star.y);
        }
    });
}, 20);

// 给 document 添加点击事件
// 当点击的时候出现 5 个星星
document.onmousedown = function(e){
    for (var i = 0; i < 5; i++){
        arr.push(new Star(ctx, e.clientX, e.clientY, 1));
        // 同时去除数组头部的星星
        arr.shift();
    }
}

// 封装函数，传递两个点，绘制两个点之间的线段
function line(x1, y1, x2, y2){
    // 开启路径
    ctx.beginPath();
    // 移动画笔到某个位置
    ctx.moveTo(x1, y1);
    // 绘制路径
    ctx.lineTo(x2, y2);
    // 关闭路径
    ctx.closePath();
    // 描边
    ctx. stroke();
}

canvas {
    /* background-color: #000; */
    background-image: url(imgs/sf.jpg);
    background-size: cover;
}

UYgYo4.png

相关文章
点击查看

本文标题:四、星星连线

文章作者:Mango

发布时间:2020年07月14日 - 13:23:13

最后更新:2020年07月14日 - 13:27:10

原始链接:https://mango185.github.io/post/550f7848.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️