8種機(jī)械鍵盤軸體對(duì)比

本人程序員，要買一個(gè)寫代碼的鍵盤，請(qǐng)問紅軸和茶軸怎么選？

本篇將會(huì)介紹如何用canvas制作動(dòng)態(tài)隨機(jī)移動(dòng)的星圖啦啦啦

小白在遠(yuǎn)離小白道路上的第一步就是搭個(gè)博客

前言

這次的博文不是接著進(jìn)行博客布置的教學(xué)了，對(duì)的，我棄坑了，也許以后會(huì)回來補(bǔ)

用HMTL5+canvas畫東西也很好玩嘛，來來來，我們來畫那種會(huì)隨機(jī)動(dòng)來動(dòng)去的星圖。先展示一個(gè)demo

demo訪問地址：動(dòng)態(tài)星圖demo

準(zhǔn)備

這一段就叫它正文好了

首先建立html文件1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

canvas star demo

body{

text-align: center;

overflow: hidden;

background: #C4C6C8;

}

因?yàn)槲壹俣阋呀?jīng)有基礎(chǔ)或者已經(jīng)看完了我貼在上面的速成教程，這一段代碼就不加以贅述了，接下來是js代碼的編寫

變量的定義1

2

3

4

5

6

7

8

9

10var width = window.innerWidth,

height = window.innerHeight,

amount = 50; //出現(xiàn)在畫布上的星星個(gè)數(shù)

var cs = document.getElementById('mycanvas'),//獲得canvas元素

cont = cs.getContext('2d'); //對(duì)canvas元素進(jìn)行2d渲染，此后的對(duì)畫布操作即對(duì)cont的操作

cs.width = width;

cs.height = height;

//設(shè)置canvas元素的尺寸為瀏覽器視窗的尺寸

cont.strokeWidth = 1; //設(shè)置描邊寬度

這一段代碼設(shè)置了基本的樣式和尺寸，接下來就是著手制作星團(tuán)了

星團(tuán)對(duì)象的定義

要完成星團(tuán)對(duì)象的定義，我們可以先對(duì)想要達(dá)到的效果進(jìn)行逐步分析、拆解，再對(duì)其內(nèi)部屬性和方法進(jìn)行不斷完善先做一個(gè)不會(huì)動(dòng)的星團(tuán)，星團(tuán)里的所有星星需要一個(gè)數(shù)組來存儲(chǔ)，數(shù)組里存儲(chǔ)的應(yīng)該是星星的圓心坐標(biāo)

需要有一個(gè)畫星星的方法，就命名為drawStar好了

在demo里看到每個(gè)星星都連著其他星星，好帶感，所以需要一個(gè)畫線的方法，就將畫線的方法命名為drawLine，連線的方法命名為linkStar好了

每個(gè)星星的出現(xiàn)的位置應(yīng)該是隨機(jī)的，需要一個(gè)產(chǎn)生合適隨機(jī)數(shù)的方法，但是這個(gè)方法也許不單單用來產(chǎn)生隨機(jī)位置，還有隨機(jī)半徑等等，所以就欽定為randomNum吧

這里需要一個(gè)方法將上面的幾個(gè)工具方法組合起來，繪制出完整的星圖，不是很會(huì)起名了，就叫initStars好了，盡管不是很順口

以上幾個(gè)方法足夠產(chǎn)生一個(gè)靜態(tài)的隨機(jī)星圖了，要讓它動(dòng)起來的話，還需要一個(gè)能夠讓星圖動(dòng)起來的方法，對(duì)的，moveStars

到這里的話，已經(jīng)初步將對(duì)象里需要的方法和屬性定義好了，接下來是一步步地實(shí)現(xiàn)

屬性和各工具方法的定義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: [], //定義星團(tuán)數(shù)組

drawStar: function(cxt,x,y,r){

//cxt為傳入的畫布對(duì)象，(x,y)為星星的圓心坐標(biāo)，r為星星的半徑

cxt.beginPath(); //創(chuàng)建路徑

cxt.arc(x,y,r,0,2*Math.PI); //畫一個(gè)圓

cxt.closePath(); //閉合路徑

cxt.fill(); //填充

return{x:x,y:y,r:r}; //返回圓心坐標(biāo)和半徑的對(duì)象

},

drawLine: function(cxt,x,y,ex,ey){

//(x,y),(ex,ey)分別為線段的起點(diǎn)和終點(diǎn)坐標(biāo)

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);

//完成基本的產(chǎn)生范圍內(nèi)隨機(jī)數(shù)的要求

},

linkStar: function(){

var pStars = this; //創(chuàng)建指針指向調(diào)用該方法的Stars對(duì)象

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)

}

}

},

...

}

到這一步，我們已經(jīng)把Stars對(duì)象里需要用到的工具方法的定義工作完成了

完成星圖的靜態(tài)模型

到這里，我們?cè)僬硪槐檫@個(gè)方法需要完成的功能：組合各個(gè)工具函數(shù)繪制出靜態(tài)的星圖

代碼如下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 = []; //初始化為空數(shù)組

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), //隨機(jī)生成星星的橫坐標(biāo)

pStars.randomNum(height,0), //隨機(jī)生成星星的縱坐標(biāo)

pStars.randomNum(2,15) //隨機(jī)生成星星的半徑

));

//返回對(duì)象{x:x,y:y,r:r}到starArr

}

pStars.linkStar(); //連線

},

}

按上述步驟簡(jiǎn)單組織后，效果如圖所示

如果你的和我的不一樣，那你肯定哪里出問題了。。

美化

這個(gè)靜態(tài)星圖的效果很驚悚沒錯(cuò)。。需要稍微美化一下。。

首先，在js代碼的頭部定義變量處加入1cont.fillStyle = "rgba(0,0,0,0.05)"; //設(shè)置填充樣式

接著，修改線段的顏色深淺，我們希望每條線段有不同的深淺度，最好是和線段的長(zhǎng)度存在一定關(guān)系先修改方法drawLine1

2

3

4

5

6

7

8

9drawLine: function(cxt,x,y,ex,ey,o){

//(x,y),(ex,ey)分別為線段的起點(diǎn)和終點(diǎn)坐標(biāo),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; //創(chuàng)建指針指向調(diào)用該方法的Stars對(duì)象

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)

}

}

}

修改之后，會(huì)呈現(xiàn)如下圖效果

完成星圖的動(dòng)態(tài)模型

接下來就是制作動(dòng)態(tài)星圖的模型了，要實(shí)現(xiàn)canvas的動(dòng)畫效果，普遍的做法是在經(jīng)過一定時(shí)間間隔后進(jìn)行重繪。如此，一個(gè)較為簡(jiǎn)單且容易想到的思路就出現(xiàn)了，經(jīng)過初始化后的靜態(tài)星圖模型已經(jīng)將所有星星的的坐標(biāo)存放于數(shù)組starArr中，只需要在清理畫布后，將數(shù)組內(nèi)的坐標(biāo)加上適當(dāng)偏移后繪制出來，即可達(dá)到想要的動(dòng)態(tài)效果。為此，我們需要在對(duì)象數(shù)組starArr中為對(duì)象添加其他屬性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;

}

...

}

}

上面的代碼已經(jīng)為對(duì)象數(shù)組中的元素添加了新的屬性，即偏移量，接下來就是設(shè)置定時(shí)器使星圖重繪了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)

}

}

至此，就已經(jīng)將對(duì)象的方法和屬性全定義完啦，最后一步就是組織js函數(shù)調(diào)用這個(gè)對(duì)象

調(diào)用1

2

3

4window.onload = function(){

Stars.initStars(cont);

Stars.moveStars();

}

組合之后，就能夠顯示出動(dòng)態(tài)星圖的效果啦

美化二

本來想做美化的，做成真正星星那樣，但是好麻煩啊，先留著坑，有空再做好了(其實(shí)后來作者棄坑了，被繁重的學(xué)業(yè)壓垮了脊梁)

全部代碼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 demo

body {

text-align: center;

overflow: hidden;

background: #C4C6C8;

}

var width = window.innerWidth,

height = window.innerHeight,

//獲取瀏覽器視窗的尺寸

amount = 50; //出現(xiàn)在畫布上的星星個(gè)數(shù)

var cs = document.getElementById('mycanvas'), //獲得canvas元素

cont = cs.getContext('2d'); //對(duì)canvas元素進(jìn)行2d渲染，此后的對(duì)畫布操作即對(duì)cont的操作

cs.width = width;

cs.height = height;

//設(shè)置canvas元素的尺寸為瀏覽器視窗的尺寸

cont.fillStyle = "rgba(0,0,0,0.15)"; //設(shè)置填充樣式

cont.strokeWidth = 1; //設(shè)置描邊寬度

var Stars = {

starArr: [], //定義星團(tuán)數(shù)組

drawStar: function(cxt, x, y, r) {

//cxt為傳入的畫布對(duì)象，(x,y)為星星的圓心坐標(biāo)，r為星星的半徑

cxt.beginPath(); //創(chuàng)建路徑

cxt.arc(x, y, r, 0, 2 * Math.PI); //畫一個(gè)圓

cxt.closePath(); //閉合路徑

cxt.fill(); //填充

return {

x: x,

y: y,

r: r

};

//返回圓心坐標(biāo)的對(duì)象

},

drawLine: function(cxt, x, y, ex, ey, o) {

//(x,y),(ex,ey)分別為線段的起點(diǎn)和終點(diǎn)坐標(biāo),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);

//完成基本的產(chǎn)生范圍內(nèi)隨機(jī)數(shù)的要求

},

linkStar: function() {

var pStars = this; //創(chuàng)建指針指向調(diào)用該方法的Stars對(duì)象

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 = []; //初始化為空數(shù)組

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)));

//返回對(duì)象{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();

}

結(jié)語(yǔ)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("前端博客++");

總結(jié)

以上是生活随笔為你收集整理的html制作动态坐标轴,HTML5 canvas制作动态随机星图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。