canvas实现蓝色彩带飘动背景动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现蓝色彩带飘动背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; overflow: hidden; } #holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } </style> </head> <body> <!-- partial:index.partial.html --> <div id="holder"></div> <!-- partial --> <script > (function () { var pi = Math.PI; var pi2 = 2 * Math.PI; this.Waves = function (holder, options) { var Waves = this; Waves.options = extend(options || {}, { resize: false, rotation: 45, waves: 5, width: 100, hue: [11, 14], amplitude: 0.5, background: true, preload: true, speed: [0.004, 0.008], debug: false, fps: false, }); Waves.waves = []; Waves.holder = document.querySelector(holder); Waves.canvas = document.createElement('canvas'); Waves.ctx = Waves.canvas.getContext('2d'); Waves.holder.appendChild(Waves.canvas); Waves.hue = Waves.options.hue[0]; Waves.hueFw = true; Waves.stats = new Stats(); Waves.resize(); Waves.init(Waves.options.preload); if (Waves.options.resize) window.addEventListener('resize', function () { Waves.resize(); }, false); }; Waves.prototype.init = function (preload) { var Waves = this; var options = Waves.options; for (var i = 0; i < options.waves; i++) Waves.waves[i] = new Wave(Waves); if (preload) Waves.preload(); }; Waves.prototype.preload = function () { var Waves = this; var options = Waves.options; for (var i = 0; i < options.waves; i++) { Waves.updateColor(); for (var j = 0; j < options.width; j++) { Waves.waves[i].update(); } } }; Waves.prototype.render = function () { var Waves = this; var ctx = Waves.ctx; var options = Waves.options; Waves.updateColor(); Waves.clear(); if (Waves.options.debug) { ctx.beginPath(); ctx.strokeStyle = '#f00'; ctx.arc(Waves.centerX, Waves.centerY, Waves.radius, 0, pi2); ctx.stroke(); } if (Waves.options.background) { Waves.background(); } each(Waves.waves, function (wave, i) { wave.update(); wave.draw(); }); }; Waves.prototype.animate = function () { var Waves = this; Waves.render(); if (Waves.options.fps) { Waves.stats.log(); Waves.ctx.font = '12px Arial'; Waves.ctx.fillStyle = '#fff'; Waves.ctx.fillText(Waves.stats.fps() + ' FPS', 10, 22); } window.requestAnimationFrame(Waves.animate.bind(Waves)); }; Waves.prototype.clear = function () { var Waves = this; Waves.ctx.clearRect(0, 0, Waves.width, Waves.height); }; Waves.prototype.background = function () { var Waves = this; var ctx = Waves.ctx; var gradient = Waves.ctx.createLinearGradient(0, 0, 0, Waves.height); gradient.addColorStop(0, '#000'); gradient.addColorStop(1, Waves.color); ctx.fillStyle = gradient; ctx.fillRect(0, 0, Waves.width, Waves.height); }; Waves.prototype.resize = function () { var Waves = this; var width = Waves.holder.offsetWidth; var height = Waves.holder.offsetHeight; Waves.scale = window.devicePixelRatio || 1; Waves.width = width * Waves.scale; Waves.height = height * Waves.scale; Waves.canvas.width = Waves.width; Waves.canvas.height = Waves.height; Waves.canvas.style.width = width + 'px'; Waves.canvas.style.height = height + 'px'; Waves.radius = Math.sqrt(Math.pow(Waves.width, 2) + Math.pow(Waves.height, 2)) / 2; Waves.centerX = Waves.width / 2; Waves.centerY = Waves.height / 2; //Waves.radius /= 2; // REMOVE FOR FULLSREEN }; Waves.prototype.updateColor = function () { var Waves = this; Waves.hue += (Waves.hueFw) ? 0.01 : -0.01; if (Waves.hue > Waves.options.hue[1] && Waves.hueFw) { Waves.hue = Waves.options.hue[1]; Waves.Waves = false; } else if (Waves.hue < Waves.options.hue[0] && !Waves.hueFw) { Waves.hue = Waves.options.hue[0]; Waves.Waves.........完整代码请登录后点击上方下载按钮下载查看
网友评论0