网站首页 网页特效 动画特效 正文
美化大气实用多彩加载中canvas动画代码下载。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>美化大气实用多彩加载中canvas动画</title> <meta name="keywords" content="美化,大气,实用,多彩,加载中,canvas动画" /> <meta name="description" content="美化大气实用多彩加载中canvas动画代码下载。" /> <meta name="author" content="残梦教程网www.cmylw.cn" /> <meta name="copyright" content="残梦教程网www.cmylw.cn" /> <style> body { background: #111; overflow: hidden; } canvas { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; }</style> </head> <body> <div></div> <script> var $ = {}; $.Particle = function( opt ) { this.radius = 7; this.x = opt.x; this.y = opt.y; this.angle = opt.angle; this.speed = opt.speed; this.accel = opt.accel; this.decay = 0.01; this.life = 1; }; $.Particle.prototype.step = function( i ) { this.speed += this.accel; this.x += Math.cos( this.angle ) * this.speed; this.y += Math.sin( this.angle ) * this.speed; this.angle += $.PI / 64; this.accel *= 1.01; this.life -= this.decay; if( this.life <= 0 ) { $.particles.splice( i, 1 ); } }; $.Particle.prototype.draw = function( i ) { $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ( $.tick + ( this.life * 120 ) ) + ', 100%, 60%, ' + this.life + ')'; $.ctx.beginPath(); if( $.particles[ i - 1 ] ) { $.ctx.moveTo( this.x, this.y ); $.ctx.lineTo( $.particles[ i - 1 ].x, $.particles[ i - 1 ].y ); } $.ctx.stroke(); $.ctx.beginPath(); $.ctx.arc( this.x, this.y, Math.max( 0.001, this.life * this.radius ), 0, $.TWO_PI ); $.ctx.fill(); var size = Math.random() * 1.25; $.ctx.fillRect( ~~( this.x + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), ~~( this.y + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), size, size ); } $.step = function() { $.particles.push( new $.Particle({ x: $.width / 2 + Math.cos( $.tick / 20 ) * $.min / 2, y: $.height / 2 + Math.sin( $.tick / 20 ) * $.min / 2, angle: $.globalRotation + $.globalAngle, speed: 0, accel: 0.01 })); $.particles.forEach( function( elem, index ) { elem.step( index ); }); $.globalRotation += $.PI / 6; $.globalAngle += $.PI / 6; }; $.draw = function() { $.ctx.clearRect( 0, 0, $.width, $.height ); $.particles.forEach( function( elem, index ) { elem.draw( index ); }); }; $.init = function() { $.canvas = document.createElement( 'canvas' ); $.ctx = $.canvas.getContext( '2d' ); $.width = 300; $.height = 300; $.canvas.width = $.width * window.devicePixelRatio; $.canvas.height = $.height * window.devicePixelRatio; $.canvas.style.width = $.width + 'px'; $.canvas.style.height = $.height + 'px'; $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio); $.min = $.width * 0.5; $.particles = []; $.globalAngle = 0; $.globalRotation = 0; $.tick = 0; $.PI = Math.PI; $.TWO_PI = $.PI * 2; $.ctx.globalCompositeOperation = 'lighter'; document.body.appendChild( $.canvas ); $.loop(); }; $.loop = function() { requestAnimationFrame( $.loop ); $.step(); $.draw(); $.tick++; }; $.init();</script> </body> </html>
猜你喜欢
- 2018-09-04 JS代码实现鼠标点击爱心特效
- 2018-08-13 HTML5响应式支持手机移动端手势滑动轮播图插件
- 2018-08-10 简单实用多功能导航菜单带幻灯轮播图搜索功能js特效插件
- 2018-06-22 完美快速解决百度分享不支持HTTPS的问题
- 2018-06-18 带文字简介链接按钮幻灯轮播图特效动画切换jQuery插件
- 2018-06-15 JavaScript中click和onclick本质区别与用法分析
- 2018-06-09 JS使用createElement()动态添加HTML
- 2018-06-09 html5手机端弹出对话框动画特效代码
- 2018-06-07 纯CSS3实现炫酷动画效果下拉导航菜单特效代码
- 2018-05-29 HTML5手机移动端头像上传大小截取jQuery插件
你 发表评论:
欢迎- 网站分类
- 标签列表
本文暂时没有评论,来添加一个吧(●'◡'●)