canvas海底多彩水母游动动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas海底多彩水母游动动画效果代码

代码标签: 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