【HTML5】悬浮泡泡

来源：互联网发布：劳丽诗雕宝淘宝店编辑：程序博客网时间：2024/04/26 08:32
效果截图：
代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><script>//http://lab.hakim.se/particles/01///http://lab.hakim.se/particles/02/window.onload = draw;var VELOCITY = 1;var PARTICLES = 200;var mouse = {x:0, y:0};var particles = [];var colors = [ "#000000","#FF0000","#FFFF00" ];var canvas ;var context;function draw(){canvas = document.getElementById('mycanvas');if (canvas && canvas.getContext) {context = canvas.getContext('2d');for( var i = 0; i < PARTICLES; i++ ) {particles.push( { x: Math.random()*window.innerWidth, y: Math.random()*window.innerHeight, vx: ((Math.random()*(VELOCITY*2))-VELOCITY),vy: ((Math.random()*(VELOCITY*2))-VELOCITY),size: 1+Math.random()*20,color: colors[ Math.floor( Math.random() * colors.length ) ]} );}setInterval( TimeUpdate, 40 );}}function TimeUpdate(e) {context.clearRect(0, 0, window.innerWidth, window.innerHeight);var len = particles.length;var particle;for( var i = 0; i < len; i++ ) {particle = particles[i];particle.x += particle.vx;particle.y += particle.vy;if (particle.x > window.innerWidth) {particle.vx = -VELOCITY - Math.random();}else if (particle.x < 0) {particle.vx = VELOCITY + Math.random();}else {particle.vx *= 1 + (Math.random() * 0.005);}if (particle.y > window.innerHeight) {particle.vy = -VELOCITY - Math.random();}else if (particle.y < 0) {particle.vy = VELOCITY + Math.random();}else {particle.vy *= 1 + (Math.random() * 0.005);}context.fillStyle = particle.color;context.beginPath();context.arc(particle.x,particle.y,particle.size,0,Math.PI*2,true);context.closePath();context.fill();}}</script></head><body>  <p id="p1"></p>  <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas></body></html>
0 0