Canvas 绘制粒子动画背景


Posted in Javascript onFebruary 15, 2017

效果如下:

Canvas 绘制粒子动画背景

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<style>
 *{
  margin:0px;
  padding:0px;
 }
 body{
  background:#000;
 }
 canvas{
  position:absolute;
  width:100%;
  height:100%;
 }
</style>
<body>
<canvas id="canvas">您的浏览器不支持,请升级最新的版本!</canvas>
<script>window.requestAnimFrame = ( function() {
 return window.requestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
   window.mozRequestAnimationFrame ||
   function( callback ) {
    window.setTimeout( callback, 1000 / 60 );
   };
})();
var can = document.getElementById("canvas");
var cxt = can.getContext("2d");
can.width = window.innerWidth;
can.height = window.innerHeight;
cxt.lineWidth = 0.3;
//初始链接线条显示位置
var mousePosition = {
 x : 30*can.width/100,
 y : 30*can.height/100
}
//圆形粒子对象参数
var dots = {
 n : 500,//圆形粒子个数
 distance : 50,//圆形粒子之间的距离
 d_radius : 80,//粒子距离鼠标点的距离
 array : []//保存n个圆形粒子对象
}
//创建随机颜色值
function colorValue(min){
 return Math.floor(Math.random()*255 + min);
}
function createColorStyle(r,g,b){
 return "rgba("+r+","+g+","+b+", 1)";
}
//混合两个圆形粒子的颜色
function mixConnect(c1,r1,c2,r2){//圆的颜色 半径
 return (c1*r1+c2*r2)/(r1+r2);
};
//生成线条的颜色
function lineColor(dot1,dot2){//获取具体的圆的颜色再计算
 var color1 = dot1.color,
   color2 = dot2.color;
 var r = mixConnect(color1.r,dot1.radius,color2.r,dot2.radius);
 var g = mixConnect(color1.g,dot1.radius,color2.g,dot2.radius);
 var b = mixConnect(color1.b,dot1.radius,color2.b,dot2.radius);
 return createColorStyle(Math.floor(r),Math.floor(g),Math.floor(b));
}
//生成圆形粒子的颜色对象
function Color(min){
 min = min || 0;
 this.r = colorValue(min);
 this.g = colorValue(min);
 this.b = colorValue(min);
 this.style = createColorStyle(this.r,this.g,this.b);
}
//创建圆形粒子对象
function Dot(){
 //圆形粒子随机圆心坐标点
 this.x = Math.random()*can.width;
 this.y = Math.random()*can.height;
 //x y 方向运动的速度值
 this.vx = -0.5 + Math.random();
 this.vy = -0.5 + Math.random();
 this.radius = Math.random()*5;
 //this.color = "#ff3333";
 this.color = new Color();
}
//绘制出圆形粒子
Dot.prototype.draw = function(){
 cxt.beginPath();
 cxt.fillStyle = this.color.style;
 cxt.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
 cxt.fill();
}
//添加圆形粒子
function createCircle(){
 for (var i=0;i<dots.n ;i++ )
 {
  dots.array.push(new Dot());
 }
}
//绘制出圆形粒子
function drawDots(){
 for (var i=0;i<dots.n ;i++ )
 {
  var dot = dots.array[i];
  dot.draw();
 }
}
//drawDots();
//移动
function moveDots(){
 for (var i=0;i<dots.n ;i++ ){
  var dot = dots.array[i];
  //当圆形粒子对象碰壁的时候就反弹回来
  if (dot.y < 0 || dot.y > can.height)
  {
   dot.vx = dot.vx;
   dot.vy = -dot.vy;
  }else if (dot.x < 0 || dot.x > can.width)
  {
   dot.vx = -dot.vx;
   dot.vy = dot.vy;
  }
  //给圆形粒子圆心坐标加上速度值移动圆形粒子
  dot.x += dot.vx;
  dot.y += dot.vy;
 }
}
//链接粒子对象
function connectDots(){
 for (var i=0;i<dots.n ; i++)
 {
  for ( var j=0;j<dots.n ; j++)
  {
   iDot = dots.array[i];
   jDot = dots.array[j];
   if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance)
   {
    if ((iDot.x - mousePosition.x) < dots.d_radius && (iDot.y - mousePosition.y) < dots.d_radius && (iDot.x - mousePosition.x) > -dots.d_radius && (iDot.y - mousePosition.y) > -dots.d_radius)
    {
     cxt.beginPath();
     //cxt.strokeStyle = "yellow";
     cxt.strokeStyle = lineColor(iDot,jDot);
     cxt.moveTo(iDot.x,iDot.y);
     cxt.lineTo(jDot.x,jDot.y);
     cxt.closePath();
     cxt.stroke();
    }
   }
  }
 }
}
createCircle();
//让圆形粒子不断的移动
function animateDots(){
 cxt.clearRect(0,0,can.width,can.height);
 moveDots();
 connectDots()
 drawDots();
 requestAnimFrame(animateDots);
}
animateDots();
can.onmousemove = function(ev){
 var ev = ev || window.event;
 mousePosition.x = ev.pageX;
 mousePosition.y = ev.pageY;
}
can.onmouseout = function(){
 mousePosition.x = can.width/2;
 mousePosition.y = can.height/2;
}
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 #Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 #Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 #Javascript
图文详解Javascript中的上下文和作用域
Feb 15 #Javascript
js实现省份下拉菜单效果
Feb 15 #Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 #Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 #Javascript
You might like
php把session写入数据库示例
2014/02/26 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
python中使用序列的方法
2015/08/03 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
军训学生自我鉴定
2014/02/12 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
搞笑爱情保证书
2014/04/29 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
python pygame入门教程
2021/06/01 Python