jquery实现canvas彩色泡泡旋转交互动画效果代码
代码语言:html
所属分类:粒子
代码描述:jquery实现canvas彩色泡泡旋转交互动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overflow: hidden; margin: 0; padding: 0; background: hsla(242, 30%, 5%, 1); } canvas { width: 100%; } </style> </head> <body> <canvas id='canv'></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> /* (Book REF) HTML5 Canvas Ch. 5: Math, Physics, and Animation ::: Uniform Circular Motion By Steve Fulton and Jeff Fulton */ window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); window.addEventListener('load', start, false); var c, $, w, h, msX, msY, midX, midY, num = 650, parts = [], begin = 50, repeat = 20, end = Math.PI * 2, force = null, msdn = false; function start() { c = document.getElementById('canv'); $ = c.getContext('2d'); w = c.width = window.innerWidth; h = c.height = window.innerHeight; midX = w / 2; midY = h / 2; force = Math.max(w, h) * 0.09; flow = begin; window.requestAnimFrame(create); run(); } function run() { window.requestAnimFrame(run); go(); } function Part() { this.deg = 0; this.rad = 0; this.x = 0; this.y = 0; this.distX = 0; this.distY = 0; this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')'; this.size; } function create() { var n = num; while (n--) { var p = new Part(); p.deg = Math.floor(Math.random() * 360); p.rad = Math.floor(Math.random() * w * 0.5); p.x = p.distX = Math.floor(Math.random() * w); p.y = p.distY = Math.floor(Math.random() * h); p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055)); parts[n] = p; } c.onmousemove = msmv; c.onmousedown = msdn; c.onmouseup = msup; var int = setInterval(function() { flow--; if (flow === repeat) clearInterval(int); }, 20); } function go() { $.globalCompositeOperation = 'source-over'; $.fillStyle = 'hsl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0