canvas海底多彩水母游动动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas海底多彩水母游动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#test {
position:absolute;
width:120px;
height:50px;
background-color:white;
color:black;
z-index:10000
}
body {
margin:0;
background:#3b494e;
width:100vw;
height:100vh;
overflow:hidden
}
body:before {
content:'';
position:absolute;
display:block;
top:0;
left:0;
width:100vw;
height:100vh;
background:linear-gradient(0deg,rgba(5,16,31,1) 0,rgba(35,51,67,1) 100%)
}
#mainstage {
overflow:hidden;
position:absolute
}
#opacityOverlay {
position:absolute;
display:block;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:10;
background:linear-gradient(0deg,rgba(0,0,0,0.8785889355742297) 0,rgba(0,0,0,0.12592787114845936) 50%)
}
@keyframes starShine {
0% {
opacity:.5
}
25% {
opacity:.2
}
50% {
opacity:.8
}
75% {
opacity:.1
}
100% {
opacity:.5
}
}.plancton {
box-sizing:border-box;
box-shadow:0 0 20px 1px rgba(255,255,255,0.7)
}
</style>
</head>
<body>
<!-- partial:index.partial.html --><canvas id="mainstage"></canvas>
<div id="opacityOverlay"></div>
<!-- partial -->
<script>
function siteOnload() {
var starArray = [];
var plancArray = [];
var selectedStar;
var canvas = document.getElementById("mainstage");
var context = canvas.getContext("2d");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
var mouse = {
x:0,
y:0
}
initiateStars(canvas,starArray,plancArray);
var TO_RADIANS = Math.PI/180;
var main = function () {
var now = Date.now();
var delta = now - then;
update();
render();
then = now;
requestAnimationFrame(main);
};
function update() {
//collision detection. Not really important here anyway.
/* for(k=0;k<starArray.length;k++) {
for(u=0;u<starArray.length;u++) {
if(starArray[k].x >= starArray[u].x - 5 &&
starArray[k].x <= starArray[u].x + 5 &&
starArray[k].y >= starArray[u].y - 5 &&
starArray[k].y <= starArray[u].y + 5 &&
u != k) {
}
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0