html制作动态坐标轴,HTML5 canvas制作动态随机星图
8種機械鍵盤軸體對比
本人程序員，要買一個寫代碼的鍵盤，請問紅軸和茶軸怎么選？
本篇將會介紹如何用canvas制作動態隨機移動的星圖啦啦啦
小白在遠離小白道路上的第一步就是搭個博客
前言
這次的博文不是接著進行博客布置的教學了，對的，我棄坑了，也許以后會回來補
用HMTL5+canvas畫東西也很好玩嘛，來來來，我們來畫那種會隨機動來動去的星圖。先展示一個demo
demo訪問地址：動態星圖demo
準備
這一段就叫它正文好了
首先建立html文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
canvas star demobody{
text-align: center;
overflow: hidden;
background: #C4C6C8;
}
因為我假定你已經有基礎或者已經看完了我貼在上面的速成教程，這一段代碼就不加以贅述了，接下來是js代碼的編寫
變量的定義1
2
3
4
5
6
7
8
9
10var width = window.innerWidth,
height = window.innerHeight,
amount = 50; //出現在畫布上的星星個數
var cs = document.getElementById('mycanvas'),//獲得canvas元素
cont = cs.getContext('2d'); //對canvas元素進行2d渲染，此后的對畫布操作即對cont的操作
cs.width = width;
cs.height = height;
//設置canvas元素的尺寸為瀏覽器視窗的尺寸
cont.strokeWidth = 1; //設置描邊寬度
這一段代碼設置了基本的樣式和尺寸，接下來就是著手制作星團了
星團對象的定義
要完成星團對象的定義，我們可以先對想要達到的效果進行逐步分析、拆解，再對其內部屬性和方法進行不斷完善先做一個不會動的星團，星團里的所有星星需要一個數組來存儲，數組里存儲的應該是星星的圓心坐標
需要有一個畫星星的方法，就命名為drawStar好了
在demo里看到每個星星都連著其他星星，好帶感，所以需要一個畫線的方法，就將畫線的方法命名為drawLine，連線的方法命名為linkStar好了
每個星星的出現的位置應該是隨機的，需要一個產生合適隨機數的方法，但是這個方法也許不單單用來產生隨機位置，還有隨機半徑等等，所以就欽定為randomNum吧
這里需要一個方法將上面的幾個工具方法組合起來，繪制出完整的星圖，不是很會起名了，就叫initStars好了，盡管不是很順口
以上幾個方法足夠產生一個靜態的隨機星圖了，要讓它動起來的話，還需要一個能夠讓星圖動起來的方法，對的，moveStars
到這里的話，已經初步將對象里需要的方法和屬性定義好了，接下來是一步步地實現
屬性和各工具方法的定義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
35var Stars = {
starArr: [], //定義星團數組
drawStar: function(cxt,x,y,r){
//cxt為傳入的畫布對象，(x,y)為星星的圓心坐標，r為星星的半徑
cxt.beginPath(); //創建路徑
cxt.arc(x,y,r,0,2*Math.PI); //畫一個圓
cxt.closePath(); //閉合路徑
cxt.fill(); //填充
return{x:x,y:y,r:r}; //返回圓心坐標和半徑的對象
},
drawLine: function(cxt,x,y,ex,ey){
//(x,y),(ex,ey)分別為線段的起點和終點坐標
cxt.beginPath();
cxt.strokeStyle = "rgba(0,0,0,1)";//為線段定義描邊樣式
cxt.moveTo(x,y);
cxt.lineTo(ex,ey);
cxt.closePath();
cxt.stroke(); //描邊
},
randomNum: function(max,min){
return Math.floor(Math.random()*(max-min+1)+min);
//完成基本的產生范圍內隨機數的要求
},
linkStar: function(){
var pStars = this; //創建指針指向調用該方法的Stars對象
for(let i = 0;i < amount;i++){
for(let j = 0;j < amount && i+j < amount;j++){
pStars.drawLine(cont,
pStars.starArr[i+j].x,pStars.starArr[i+j].y,
pStars.starArr[i].x,pStars.starArr[i].y)
}
}
},
...
}
到這一步，我們已經把Stars對象里需要用到的工具方法的定義工作完成了
完成星圖的靜態模型
到這里，我們再整理一遍這個方法需要完成的功能：組合各個工具函數繪制出靜態的星圖
代碼如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var Stars = {
...
initStars: function(cont){
var pStars = this;
pStars.starArr = []; //初始化為空數組
cont.clearRect(0,0,cs.width,cs.height);//順手清理畫布
for(let i = 0;i < amount;i++){
pStars.starArr.push(pStars.drawStar(cont,
pStars.randomNum(width,0), //隨機生成星星的橫坐標
pStars.randomNum(height,0), //隨機生成星星的縱坐標
pStars.randomNum(2,15) //隨機生成星星的半徑
));
//返回對象{x:x,y:y,r:r}到starArr
}
pStars.linkStar(); //連線
},
}
按上述步驟簡單組織后，效果如圖所示
如果你的和我的不一樣，那你肯定哪里出問題了。。
美化
這個靜態星圖的效果很驚悚沒錯。。需要稍微美化一下。。
首先，在js代碼的頭部定義變量處加入1cont.fillStyle = "rgba(0,0,0,0.05)"; //設置填充樣式
接著，修改線段的顏色深淺，我們希望每條線段有不同的深淺度，最好是和線段的長度存在一定關系先修改方法drawLine1
2
3
4
5
6
7
8
9drawLine: function(cxt,x,y,ex,ey,o){
//(x,y),(ex,ey)分別為線段的起點和終點坐標,o為透明度
cxt.beginPath();
cxt.strokeStyle = 'rgba(0,0,0,'+o+')';//為線段定義描邊樣式
cxt.moveTo(x,y);
cxt.lineTo(ex,ey);
cxt.closePath();
cxt.stroke(); //描邊
}
修改方法linkStar1
2
3
4
5
6
7
8
9
10
11
12
13
14
15linkStar: function(){
var pStars = this; //創建指針指向調用該方法的Stars對象
for(let i = 0;i < amount;i++){
for(let j = 0;j < amount && i+j < amount;j++){
var xx = Math.abs(pStars.starArr[i+j].x - pStars.starArr[i].x),
yy = Math.abs(pStars.starArr[i+j].y - pStars.starArr[i].y),
line = Math.sqrt(xx*xx,yy*yy),
o = 1/line*7-0.009;
o= o > 0.05 ? 0.05 :o;
pStars.drawLine(cont,
pStars.starArr[i+j].x,pStars.starArr[i+j].y,
pStars.starArr[i].x,pStars.starArr[i].y,o)
}
}
}
修改之后，會呈現如下圖效果
完成星圖的動態模型
接下來就是制作動態星圖的模型了，要實現canvas的動畫效果，普遍的做法是在經過一定時間間隔后進行重繪。如此，一個較為簡單且容易想到的思路就出現了，經過初始化后的靜態星圖模型已經將所有星星的的坐標存放于數組starArr中，只需要在清理畫布后，將數組內的坐標加上適當偏移后繪制出來，即可達到想要的動態效果。為此，我們需要在對象數組starArr中為對象添加其他屬性1
2
3
4
5
6
7
8
9
10
11var Stars = {
...
moveStars: function(){
var pStars = this;
for(let i = 0;i < amount;i++){
pStars.starArr[i].moveX = pStars.randomNum(10,-10)/40;
pStars.starArr[i].moveY = pStars.randomNum(10,-10)/40;
}
...
}
}
上面的代碼已經為對象數組中的元素添加了新的屬性，即偏移量，接下來就是設置定時器使星圖重繪了1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19var Stars = {
...
moveStars: function(){
...
setInterval(function(){
cont.clearRect(0,0,cs.width,cs.height); //清理
for(let i = amount - 1;i >= 0;i--){
var star = pStars.starArr[i];
star.x += star.moveX;
star.y += star.moveY;
//完成偏移
star.x < 0 ? (star.x = cs.width) : (star.x > cs.width ? star.x = 0 : '');
star.y < 0 ? (star.y = cs.height) : (star.y > cs.height ? star.y = 0 : '');
Stars.drawStar(cont,star.x,star.y,star.r);
}
Stars.linkStar();
},50)
}
}
至此，就已經將對象的方法和屬性全定義完啦，最后一步就是組織js函數調用這個對象
調用1
2
3
4window.onload = function(){
Stars.initStars(cont);
Stars.moveStars();
}
組合之后，就能夠顯示出動態星圖的效果啦
美化二
本來想做美化的，做成真正星星那樣，但是好麻煩啊，先留著坑，有空再做好了(其實后來作者棄坑了，被繁重的學業壓垮了脊梁)
全部代碼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
canvas star demobody {
text-align: center;
overflow: hidden;
background: #C4C6C8;
}
var width = window.innerWidth,
height = window.innerHeight,
//獲取瀏覽器視窗的尺寸
amount = 50; //出現在畫布上的星星個數
var cs = document.getElementById('mycanvas'), //獲得canvas元素
cont = cs.getContext('2d'); //對canvas元素進行2d渲染，此后的對畫布操作即對cont的操作
cs.width = width;
cs.height = height;
//設置canvas元素的尺寸為瀏覽器視窗的尺寸
cont.fillStyle = "rgba(0,0,0,0.15)"; //設置填充樣式
cont.strokeWidth = 1; //設置描邊寬度
var Stars = {
starArr: [], //定義星團數組
drawStar: function(cxt, x, y, r) {
//cxt為傳入的畫布對象，(x,y)為星星的圓心坐標，r為星星的半徑
cxt.beginPath(); //創建路徑
cxt.arc(x, y, r, 0, 2 * Math.PI); //畫一個圓
cxt.closePath(); //閉合路徑
cxt.fill(); //填充
return {
x: x,
y: y,
r: r
};
//返回圓心坐標的對象
},
drawLine: function(cxt, x, y, ex, ey, o) {
//(x,y),(ex,ey)分別為線段的起點和終點坐標,o為透明度
cxt.beginPath();
cxt.strokeStyle = 'rgba(0,0,0,' + o + ')';//為線段定義描邊樣式
cxt.moveTo(x, y);
cxt.lineTo(ex, ey);
cxt.closePath();
cxt.stroke(); //描邊
},
randomNum: function(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min);
//完成基本的產生范圍內隨機數的要求
},
linkStar: function() {
var pStars = this; //創建指針指向調用該方法的Stars對象
for (let i = 0; i < amount; i++) {
for (let j = 0; j < amount && i + j < amount; j++) {
var xx = Math.abs(pStars.starArr[i + j].x - pStars.starArr[i].x),
yy = Math.abs(pStars.starArr[i + j].y - pStars.starArr[i].y),
line = Math.sqrt(xx * xx, yy * yy),
o = 1 / line * 7 - 0.009;
o = o > 0.05 ? 0.05 : o;
pStars.drawLine(cont,
pStars.starArr[i + j].x, pStars.starArr[i + j].y,
pStars.starArr[i].x, pStars.starArr[i].y, o)
}
}
},
initStars: function(cont) {
var pStars = this;
pStars.starArr = []; //初始化為空數組
cont.clearRect(0, 0, cs.width, cs.height);//順手清理畫布
for (let i = 0; i < amount; i++) {
pStars.starArr.push(pStars.drawStar(cont, pStars.randomNum(width, 0), pStars.randomNum(height, 0), pStars.randomNum(2, 15)));
//返回對象{x:x,y:y}到starArr
}
pStars.linkStar(); //連線
},
moveStars: function() {
var pStars = this;
for (let i = 0; i < amount; i++) {
pStars.starArr[i].moveX = pStars.randomNum(10, -10) / 40;
pStars.starArr[i].moveY = pStars.randomNum(10, -10) / 40;
}
setInterval(function() {
cont.clearRect(0, 0, cs.width, cs.height);
for (let i = amount - 1; i >= 0; i--) {
var star = this.Stars.starArr[i];
star.x += star.moveX;
star.y += star.moveY;
//完成偏移
star.x < 0 ? (star.x = cs.width) : (star.x > cs.width ? star.x = 0 : '');
star.y < 0 ? (star.y = cs.height) : (star.y > cs.height ? star.y = 0 : '');
Stars.drawStar(cont, star.x, star.y, star.r);
}
Stars.linkStar();
}, 50);
}
}
window.onload = function() {
Stars.initStars(cont);
Stars.moveStars();
}
結語1
2
3
4
5
6
7
8
9
10
11
12function ()｛
count: 0;
addBlog: function(){
count++;
}
log: function(str){
console.log(str);
}
｝
var 人生成就 = new Achievement();
人生成就.addBlog();
人生成就.log("前端博客++");
總結
以上是生活随笔為你收集整理的html制作动态坐标轴,HTML5 canvas制作动态随机星图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蚂蝗怕什么（身上涂什么可以防蚂蚁）
- 下一篇： hikaridatasource 加密后