资源网 > 网站源码 > 网页代码 > 美化大气实用多彩加载中canvas动画 看效果图

美化大气实用多彩加载中canvas动画 看效果图


美化大气实用多彩加载中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.afxjsw.top" />
<meta name="copyright" content="教程网 网址" />
<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>

本段代码来自 http://www.cmylw.cn/news/1144.html

| 来源:提取码:
您可以免费下载,该资源
声明:以上文章或转稿中文字或图片涉及版权等问题,请作者在及时联系我们处理。喜欢本站”记得每天访问下网站哦

本站资源站来自互联网收集,全网资源娱乐技术软件下载,最稳定色资源更新仅供用于学习和交流,如有侵权,请联系站长并出示版权证明以便删除

每天收集提供QQ活动,免费线报活动,教程分享,游戏技巧,头像源码,QQ资源网以及技术教程网相关资源分享。欢迎投稿:爱分享资源网送红包

    备案号: 苏ICP备18056909号-4