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) { } } } */ for(k=0;k<starArray.length;k++) { if(starArray[k].y < -150) { starArray[k].y = canvas.height + 150; starArray[k].x = Math.floor(Math.random() * canvas.width) + 0; } else if(starArray[k].y > canvas.height + 150) { starArray[k].y = - 150; starArray[k].x = Math.floor(Math.random() * canvas.width) + 0; } else if(starArray[k].x < -150) { starArray[k].y = Math.floor(Math.random() * canvas.width) + 0; starArray[k].x = canvas.width + 150; } else if(starArray[k].x > canvas.width + 150) { starArray[k].y = Math.floor(Math.random() * canvas.width) + 0; starArray[k].x = - 150; } else { if(k === 0) { calculateStarMovement(starArray[k],true); } else { } } calculateStarMovement(starArray[k]); } } function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.globalCompositeOperation = 'lighter'; //test //context.rect(0,0,150,150); //context.stroke(); for(i=0;i<starArray.length;i++) { drawSingleStar(starArray[i],context); } } main(); var then = Date.now(); } function calculateStarMovement(target,status) { target.x -= target.speed * Math.sin(target.angle * (Math.PI/180)); target.y += target.speed * Math.cos(target.angle * (Math.PI/180)); if(target.angle > target.newAngle) { target.angle = target.angle - 0.1; } else if(target.angle < target.newAngle) { target.angle = target.angle + 0.1; } if(target.lastCourse + 2000 < new Date().getTime()) { target.newAngle = Math.floor(Math.random() * 360); target.lastCourse = new Date().getTime(); } for(i=0;i<target.tentacles.length;i++) { target.tentacles[i].start += target.tentacles[i].direction; if(target.tentacles[i].start > target.tentacles[i].max) { target.tentacles[i].direction = target.tentacles[i].direction * -1; } else if(target.tentacles[i].start < target.tentacles[i].max * -1) { target.tentacles[i].direction = target.tentacles[i].direction * -1; } } target.speed += target.direction; if(target.speed > target.speedmax) { target.direction = target.direction * -1; target.speed = target.speedmax - 0.01; } else if(target.speed <= 0.15) { target.direction = target.direction * -1; target.sped = 0.16; } } function drawSingleStar(star, context) { context.shadowBlur = 15; context.shadowColor = "rgba(" + (star.color.red) + "," + (star.color.green) + "," + (star.color.blue) + "," + 0.3 + ")"; var grd = context.createRadialGradient(star.x, star.y, 1, star.x, star.y, 15); grd.addColorStop(0,"rgba(255,255,225,1)"); grd.addColorStop(1,"rgba(" + (star.color.red) + "," + (star.color.green) + "," + (star.color.blue) + "," + 0 + ")"); context.beginPath(); context.arc(star.x,star.y,15,0, 2 * Math.PI); context.fillStyle = grd; context.fill(); //Math.cos((angle - 90 * Math.PI/180) * length + x; //Math.sin((angle - 90 * Math.PI/180) * length + y; let top = { x:Math.cos((star.angle + 90) * Math.PI/180) * 15 + star.x, y:Math.sin((star.angle + 90) * Math.PI/180) * 15 + star.y, }; let left = { x:Math.cos((star.angle + (-50)) * Math.PI/180) * (65 + (-star.speed * 7)) + top.x, y:Math.sin((star.angle + (-50)) * Math.PI/180) * (65 + (-star.speed * 7)) + top.y, }; let right = { x:Math.cos((star.angle + (230)) * Math.PI/180) * (65 + (-star.speed * 7)) + top.x, y:Math.sin((star.angle + (230)) * Math.PI/180) * (65 + (-star.speed * 7)) + top.y, }; let rightCtrl = { x:Math.cos((star.angle + (180)) * Math.PI/180) * 50 + top.x, y:Math.sin((star.angle + (180)) * Math.PI/180) * 50 + top.y, }; let leftCtrl = { x:Math.cos((star.angle + (0)) * Math.PI/180) * 50 + top.x, y:Math.sin((star.angle + (0)) * Math.PI/180) * 50 + top.y, }; context.shadowBlur = 30; context.shadowColor = "rgba(" + (star.color.red) + "," + .........完整代码请登录后点击上方下载按钮下载查看
网友评论0