效果（源碼在最后）：
實現(xiàn)：
1.定義標簽：
|
1
2
3
4
|
<h1>北極光之夜</h1><canvas id="draw" style=" position: fixed; display: block;"> 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試</canvas> |
2. 文字的基本樣式：
|
1
2
3
4
5
6
7
8
9
|
h1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5em; font-family: 'fangsong'; color: rgb(38, 205, 247); } |
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中對齊
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
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
|
<script> /* 首先獲取canvas畫布 */ var canvas = document.querySelector("#draw"); var yuan = canvas.getContext("2d"); /* 綁定窗口大小發(fā)生改變事件，讓canvas隨時鋪滿瀏覽器可視區(qū) */ window.onresize=resizeCanvas; function resizeCanvas(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; } resizeCanvas(); /* 定義數(shù)組，存下面觸發(fā)移動事件時產(chǎn)生的小圓 */ var arr = []; /* 繪制小圓形的方法，x與y是初始位置，r是圓半徑 */ function circle (x,y,r){ this.x=x; this.y=y; this.r=r; /* 得一個隨機顏色 */ this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})` /* 圓的移動方向，random函數(shù)為隨機返回一個0.0到1.0的數(shù)，x可得隨機正負數(shù)，y為隨機正數(shù) */ this.xZou = parseInt(Math.random()*10-5); this.yZou = parseInt(Math.random()*10); /* 向arr數(shù)組末尾添加這個元素 */ arr.push(this); } /* 更新圓形的方法 */ circle.prototype.updated = function() { /* x和y增加，呈現(xiàn)圓形一直走 */ this.x = this.x + this.xZou ; this.y = this.y + this.yZou ; /* 半徑慢慢減少 */ this.r = this.r - 0.1 ; /* 當(dāng)半徑小于1清除這個圓 */ if(this.r<0){ this.remove(); } } /* 刪除小圓的函數(shù) */ circle.prototype.remove = function (){ /* 遍歷數(shù)組，找到和調(diào)用這個函數(shù)相同的圓后用splice函數(shù)刪除 */ for(let i=0;i<arr.length;i++){ if(this==arr[i]) { arr.splice(i,1); } } } /* 渲染小圓 */ circle.prototype.render = function(){ yuan.beginPath(); yuan.arc(this.x,this.y,this.r,0,2*3.14,false); yuan.fillStyle = this.color; yuan.fill(); } /* 給畫布綁定鼠標經(jīng)過事件 */ canvas.addEventListener('mousemove',function(e){ /* 傳入x，y，r。offsetX距離左側(cè)距離，..， */ new circle(e.offsetX,e.offsetY,Math.random()*15); }) /* 定時器渲染小圓，開始動畫 ，30毫秒一次 */ setInterval(function(){ /* 清屏 */ yuan.clearRect(0,0,canvas.width,canvas.height); /* 循環(huán)數(shù)組，給每個小圓更新和渲染 */ for(let i=0;i<arr.length;i++){ /* 更新 */ arr[i].updated(); /* 如果瀏覽器支持，則渲染 */ if(arr[i].render()){ arr[i].render(); } } },30) </script> |
canvas鏈接
splice（）方法鏈接
random（）方法鏈接
push（）方法鏈接
resize事件鏈接
完整源碼：
|
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
|
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: rgb(72, 75, 122); } h1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 5em; font-family: 'fangsong'; color: rgb(38, 205, 247); } </style></head><body> <h1>北極光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試 </canvas> <script> /* 首先獲取canvas畫布 */ var canvas = document.querySelector("#draw"); var yuan = canvas.getContext("2d"); /* 綁定窗口大小發(fā)生改變事件，讓canvas隨時鋪滿瀏覽器可視區(qū) */ window.onresize=resizeCanvas; function resizeCanvas(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; } resizeCanvas(); /* 定義數(shù)組，存下面觸發(fā)移動事件時產(chǎn)生的小圓 */ var arr = []; /* 繪制小圓形的方法，x與y是初始位置，r是圓半徑 */ function circle (x,y,r){ this.x=x; this.y=y; this.r=r; /* 得一個隨機顏色 */ this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})` /* 圓的移動方向，random函數(shù)為隨機返回一個0.0到1.0的數(shù)，x可得隨機正負數(shù)，y為隨機正數(shù) */ this.xZou = parseInt(Math.random()*10-5); this.yZou = parseInt(Math.random()*10); /* 向arr數(shù)組末尾添加這個元素 */ arr.push(this); } /* 更新圓形的方法 */ circle.prototype.updated = function() { /* x和y增加，呈現(xiàn)圓形一直走 */ this.x = this.x + this.xZou ; this.y = this.y + this.yZou ; /* 半徑慢慢減少 */ this.r = this.r - 0.1 ; /* 當(dāng)半徑小于1清除這個圓 */ if(this.r<0){ this.remove(); } } /* 刪除小圓的函數(shù) */ circle.prototype.remove = function (){ /* 遍歷數(shù)組，找到和調(diào)用這個函數(shù)相同的圓后用splice函數(shù)刪除 */ for(let i=0;i<arr.length;i++){ if(this==arr[i]) { arr.splice(i,1); } } } /* 渲染小圓 */ circle.prototype.render = function(){ yuan.beginPath(); yuan.arc(this.x,this.y,this.r,0,2*3.14,false); yuan.fillStyle = this.color; yuan.fill(); } /* 給畫布綁定鼠標經(jīng)過事件 */ canvas.addEventListener('mousemove',function(e){ /* 傳入x，y，r。offsetX距離左側(cè)距離，..， */ new circle(e.offsetX,e.offsetY,Math.random()*15); }) /* 定時器渲染小圓，開始動畫 ，30毫秒一次 */ setInterval(function(){ /* 清屏 */ yuan.clearRect(0,0,canvas.width,canvas.height); /* 循環(huán)數(shù)組，給每個小圓更新和渲染 */ for(let i=0;i<arr.length;i++){ /* 更新 */ arr[i].updated(); /* 如果瀏覽器支持，則渲染 */ if(arr[i].render()){ arr[i].render(); } } },30) </script></body></html> |
其它：
今日三省吾身：安逸的生活沒意思，充滿挑戰(zhàn)，取得勝利，才是生命真諦。
到此這篇關(guān)于html+css+js實現(xiàn)canvas跟隨鼠標的小圓特效源碼的文章就介紹到這了,更多相關(guān)canvas跟隨鼠標的小圓內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/luo1831251387/article/details/114714705
