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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
Node.js实现断点续传
Jun 23 Javascript
JavaScript 对象创建的3种方法
Nov 17 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 一元分词算法
2009/11/30 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php如何获取文件的扩展名
2015/10/28 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python实现的选择排序算法示例
2017/11/29 Python
python 动态加载的实现方法
2017/12/22 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python eval函数原理及用法解析
2020/11/14 Python
行政助理求职自荐信
2013/10/26 职场文书
文明村创建实施方案
2014/03/27 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
2014企业年终工作总结
2014/12/23 职场文书
单位车辆管理制度
2015/08/05 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书