网站首页 网页特效 动画特效 正文
美化大气实用多彩加载中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插件
欢迎 你 发表评论:
- 网站分类
- 标签列表
本文暂时没有评论，来添加一个吧(●'◡'●)