canvas粒子动画背景的实现示例


Posted in HTML / CSS onSeptember 03, 2018

效果 :)

不带连线效果:

canvas粒子动画背景的实现示例

带连线的效果:

canvas粒子动画背景的实现示例

教程

要实现这样的效果其实很简单,大概分为这么几个步骤:

创建canvas

首先需要在需要展示粒子背景的父元素中创建一个canvas标签, 指定widthheight, 在我们生成随机点坐标的时候需要用widthheight来做参照。widthheight等于父元素的宽和高。

// 假如父元素是body
const ele = document.body;
const canvas = document.createElement('canvas');
canvas.width = ele.clientWidth;
canvas.height = ele.clientHeight;
// 将canvas标签插入
ele.appendChild(canvas);

随机生成一定数量的点坐标信息

widthheight做参照随机生成一定数量的点坐标信息,包含x, y, rateX(点在X轴的移动速率), rateY(点在Y轴移动的速率), rateXrateY决定了点的运动轨迹。

const points = [];
// 随机生成点的坐标,需指定radius的最大值
function getPoint(radius) {
  const x = Math.ceil(Math.random() * this.width), // 粒子的x坐标
    y = Math.ceil(Math.random() * this.height), // 粒子的y坐标
    r = +(Math.random() * this.radius).toFixed(4), // 粒子的半径
    rateX = +(Math.random() * 2 - 1).toFixed(4), // 粒子在x方向运动的速率
    rateY = +(Math.random() * 2 - 1).toFixed(4); // 粒子在y方向运动的速率

  return { x, y, r, rateX, rateY };
}

// 随机生成100个点的坐标信息
for (let i = 0; i < 100; i++) {
  points.push(this.getPoint());
}

将生成的点数组画到canvas上

function drawPoints() {
  points.forEach((item, i) => {
    ctx.beginPath();
    ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false);
    ctx.fillStyle = '#fff';
    ctx.fill();
    // 根据rateX和rateY移动点的坐标
    if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) {
      item.x += item.rateX * rate;
      item.y += item.rateY * rate;
    } else {
      // 如果粒子运动超出了边界,将这个粒子去除,同时重新生成一个新点。
      points.splice(i, 1);
      points.push(getPoint(radius));
    }
  });
}

画线

遍历点数组,两两比较点坐标,如果两点之间距离小于某个值,在两个点之间画一条直线,lineWidth随两点之间距离改变,距离越大,线越细。

// 计算两点之间的距离
function dis(x1, y1, x2, y2) {
  var disX = Math.abs(x1 - x2),
    disY = Math.abs(y1 - y2);

  return Math.sqrt(disX * disX + disY * disY);
}

function drawLines() {
  const len = points.length;
  //对圆心坐标进行两两判断
  for(let i = 0; i < len; i++) {
    for(let j = len - 1; j >= 0; j--) {
      const x1 = points[i].x,
        y1 = points[i].y,
        x2 = points[j].x,
        y2 = points[j].y,
        disPoint = dis(x1, y1, x2, y2);

      // 如果两点之间距离小于150,画线
      if(disPoint <= 150) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = '#fff';
        //两点之间距离越大,线越细,反之亦然
        ctx.lineWidth = 1 - disPoint / distance;
        ctx.stroke();
      }
    }
  }
}

动画

使用requestAnimationFrame循环调用draw方法(draw方法里包含画点和画线),同时在draw的时候根据rateXrateY来改动点的位置。

// 调用draw函数开启动画
(function draw() {
  ctx.clearRect(0, 0, width, height);
  drawPoints();
  // 如果不需要画线,取消下面这行代码即可。
  drawLines();
  window.requestAnimationFrame(draw);
}());

完整代码请看: https://github.com/PengJiyuan/particle-bg

我的Github:https://github.com/PengJiyuan

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 #HTML / CSS
html5新特性与用法大全
Sep 13 #HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 #HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 #HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 #HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 #HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 #HTML / CSS
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP学习之整理字符串
2011/04/17 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
Exjs 入门篇
2010/04/07 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
python3.x上post发送json数据
2018/03/04 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现动态数组的示例代码
2019/07/15 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
python如何对链表操作
2020/10/10 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
工程管理英文求职信
2014/03/18 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
python的变量和简单数字类型详解
2021/09/15 Python