先看效果（完整代碼在底部）：
因為錄屏軟體的原因，影片看著有點遲鈍，其實是影片很順暢的~
<iframe id="H83IJWA2-1618058290302" src="https://player.bilibili.com/player.html?aid=715051508" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
https://space.bilibili.com/176586698
實作程序（可一步一步實作）：
1.定義標簽與基本css樣式：
<h1>北極光之夜，</h1>
<canvas id="canvas"></canvas>
#canvas{
position: fixed;
top: 0;
left: 0;
/* filter: contrast(30); */
}
主要是canvas重力小球部分，h1標題文字等的css部分就不細寫了，看原始碼即可，
2.開始js部分實作，先獲取畫布：
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
3. 定義變數（看注釋）：
// w為畫布寬 ，h為畫布高
var w=0,h=0;
// 存放小球顏色陣列，給點好看的顏色 ╭(●｀?′●)╯
var colour = ["#00BFFF","#00FFFF","#3CB371","#FFFF00","#FF8C00","#7B68EE"];
// 存放每個小球的基本資訊，位置半徑等等...
var arr = [];
// 小球數量
var num = 66;
4.畫布自適應螢屏大小函式，這個直接復制便可，以后做畫布背景都可以用：
window.onresize=resizeCanvas;
function resizeCanvas(){
w=canvas.width = window.innerWidth;
h=canvas.height = window.innerHeight;
// 視窗大小改變時，arr陣列重新初始化
arr.length = 0;
chushi();
}
resizeCanvas();
5. 定義一個函式后面用，作用是隨機回傳mix與max間的一個值，也直接復制：
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
Math.random() 回傳0到1之間的數，
6. arr陣列初始化，每個小球的初始資訊：
function chushi(){
for(let i=0;i<num;i++){
arr.push({
// x為在畫布水平方向位置
x:getRandomArbitrary(15,w-15),
// y為在畫布垂直方向位置
y:getRandomArbitrary(-h/2,h/2),
// 小球半徑
r:getRandomArbitrary(5,15),
// 小球水平方向移動距離大小
dx:getRandomArbitrary(-3,3),
// 小球垂直方向移動距離大小
dy:0.5,
// 隨機顏色
color: colour[parseInt(Math.random() * (colour.length-1))]
})
}
}
parseInt（）回傳整數，
7.繪制畫布每一幀小球 ????：
function draw(){
for(let i=0;i<arr.length;i++){
let circle = arr[i];
// 開始繪制
ctx.beginPath();
// 顏色
ctx.fillStyle = circle.color;
// 畫圓
ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false);
// 定義陰影
ctx.shadowOffsetx=0;
ctx.shadowOffsetY=0;
ctx.shadowBlur= 20;
ctx.shadowColor = circle.color;
// 填充
ctx.fill();
// 結束繪制
ctx.closePath();
}
}
8. 更新，小球資訊要進行的變化：
function updates(){
// 回圈陣列
for(let i=0;i<arr.length;i++){
// 如果小球垂直位置+半徑+dy+0.3 將要大于螢屏高度，就是小球要超出螢屏底部時
if(arr[i].y + arr[i].r + arr[i].dy + 0.3>=h){
// 垂直移動距離大小變負數，這樣小球會往反方向移動
arr[i].dy = -arr[i].dy;
// 同時垂直移動距離大小×0.9，逐漸變小，不能一直動個不停
arr[i].dy *= 0.9;
// 水平方向同上
arr[i].dx *= 0.9;
}else{
// 垂直移動距離大小+0.3，這樣可以有加速度效果，0.3是我覺得合適，也可以其它
arr[i].dy += 0.3;
}
// 如果小球水平位置+半徑+dx 將要大于螢屏寬度，就是小球要超出螢屏左右側部時
if(arr[i].x + arr[i].r + arr[i].dx > w || arr[i].x - arr[i].r <=0){
// 水平移動距離大小變負數，這樣小球會往反方向移動
arr[i].dx = -arr[i].dx;
}
//小球位置改變
arr[i].x += arr[i].dx;
arr[i].y += arr[i].dy;
}
}
9.設定影片：
// arr初始化
chushi();
setInterval(function(){
ctx.clearRect(0, 0, w , h);
//繪制
draw();
//更新
updates();
},10)
ctx.clearRect（）：清除畫布，
10.給body系結點擊事件，滑鼠點擊視窗某一位置后小球上升一段距離：
var body =document.querySelector("#body");
body.addEventListener('click',function(event){
for(let i=0;i<arr.length;i++){
// 如果arr[i].y - arr[i].r 還大于0，0就是螢屏頂部
if(arr[i].y - arr[i].r>=0){
// dy給一個隨機值
arr[i].dy = getRandomArbitrary(-10,-5);
// dx給一個隨機值
arr[i].dx=getRandomArbitrary(-3,3);
}
}
})
完整代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
overflow: hidden;
background-color: rgb(5, 7, 24);
}
#canvas{
position: fixed;
top: 0;
left: 0;
/* filter: contrast(30); */
}
.yuan{
position: absolute;
width: 5px;
height: 5px;
border: 2px solid rgb(11, 147, 211);
border-radius: 50%;
animation: big 1s linear;
box-shadow:inset 0 0 200px rgb(11, 147, 211);
}
@keyframes big{
100%{
width: 1000px;
height: 1000px;
box-shadow:inset 0 0 0px rgb(11, 147, 211);
border: 2px solid transparent;
/* background-color: rgb(11, 147, 211); */
}
}
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%,-50%);
font-size: 8vw;
color: transparent;
-webkit-background-clip: text;
background-image: url(img/star.gif);
filter: drop-shadow(0 0 60px rgb(0, 132, 255));
}
</style>
</head>
<body id="body">
<h1>北極光之夜，</h1>
<canvas id="canvas"></canvas>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
// w為畫布寬 ，h為畫布高
var w=0,h=0;
// 存放小球顏色陣列，給點好看的顏色 ╭(●｀?′●)╯
var colour = ["#00BFFF","#00FFFF","#3CB371","#FFFF00","#FF8C00","#7B68EE"];
// 存放每個小球的基本資訊，位置半徑等等...
var arr = [];
// 小球數量
var num = 66;
window.onresize=resizeCanvas;
function resizeCanvas(){
w=canvas.width = window.innerWidth;
h=canvas.height = window.innerHeight;
// 視窗大小改變時，arr陣列重新初始化
arr.length = 0;
chushi();
}
resizeCanvas();
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function chushi(){
for(let i=0;i<num;i++){
arr.push({
// x為在畫布水平方向位置
x:getRandomArbitrary(15,w-15),
// y為在畫布垂直方向位置
y:getRandomArbitrary(-h/2,h/2),
// 小球半徑
r:getRandomArbitrary(5,15),
// 小球水平方向移動距離大小
dx:getRandomArbitrary(-3,3),
// 小球垂直方向移動距離大小
dy:0.5,
// 隨機顏色
color: colour[parseInt(Math.random() * (colour.length-1))]
/* color: `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
*/ })
}
}
function draw(){
for(let i=0;i<arr.length;i++){
let circle = arr[i];
// 開始繪制
ctx.beginPath();
// 顏色
ctx.fillStyle = circle.color;
// 畫圓
ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false);
// 定義陰影
ctx.shadowOffsetx=0;
ctx.shadowOffsetY=0;
ctx.shadowBlur= 20;
ctx.shadowColor = circle.color;
// 填充
ctx.fill();
// 結束繪制
ctx.closePath();
}
}
function updates(){
// 回圈陣列
for(let i=0;i<arr.length;i++){
// 如果小球垂直位置+半徑+dy+0.3 將要大于螢屏高度，就是小球要超出螢屏底部時
if(arr[i].y + arr[i].r + arr[i].dy + 0.3>=h){
// 垂直移動距離大小變負數，這樣小球會往反方向移動
arr[i].dy = -arr[i].dy;
// 同時垂直移動距離大小×0.9，逐漸變小，不能一直動個不停
arr[i].dy *= 0.9;
// 水平方向同上
arr[i].dx *= 0.9;
}else{
// 垂直移動距離大小+0.3，這樣可以有加速度效果，0.3是我覺得合適，也可以其它
arr[i].dy += 0.3;
}
// 如果小球水平位置+半徑+dx 將要大于螢屏寬度，就是小球要超出螢屏左右側部時
if(arr[i].x + arr[i].r + arr[i].dx > w || arr[i].x - arr[i].r <=0){
// 水平移動距離大小變負數，這樣小球會往反方向移動
arr[i].dx = -arr[i].dx;
}
//小球位置改變
arr[i].x += arr[i].dx;
arr[i].y += arr[i].dy;
}
}
chushi();
setInterval(function(){
ctx.clearRect(0, 0, w , h);
draw();
updates();
},10)
var body =document.querySelector("#body");
body.addEventListener('click',function(event){
let left = event.clientX,top = event.clientY;
console.log(left,top);
let yuan = document.createElement('div');
yuan.classList.add('yuan');
yuan.style.cssText = `left: ${left}px;top: ${top}px; transform: translate(-50%,-50%); `
body.appendChild(yuan);
setTimeout(function(){
body.removeChild(yuan);
},999);
for(let i=0;i<arr.length;i++){
if(arr[i].y - arr[i].r>=0){
arr[i].dy = getRandomArbitrary(-10,-5);
arr[i].dx=getRandomArbitrary(-3,3);
}
}
})
</script>
</body>
</html>
其它：
物轉星移，花開花落，周而復始，生生不息，但今昔已非昨日，然今榷訓容依舊，- - -《蟲師》
這是我的B站賬號~：https://space.bilibili.com/176586698
敲鑼打鼓~
關注一波~
會有更多有意思的東西~
大概~
╭(●`?′●)╯╰(●’?’●)╮
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275010.html
標籤：其他
上一篇：有這種CDN服務嗎？謝謝。
下一篇：2021-04-11