js实现三角形粒子运动


Posted in Javascript onSeptember 22, 2020

本文实例为大家分享了js实现三角形粒子运动的具体代码,供大家参考,具体内容如下

效果(这里只是截了一个静态图,实际上里面的粒子是运动状态的):

js实现三角形粒子运动

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>粒子</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  body {
   overflow: hidden;
  }
 </style>
 <script>
  //随机数获取 3 10 *7+3
  function random(min, max) {
   return Math.random() * (max - min) + min;

  }
  //亮色系
  // colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
  //暗色系
  colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
  //获取窗口宽高
  var width = window.innerWidth;
  var height = window.innerHeight;
  function Bubble() {
   this.r = random(5, 100);
   this.x1 = random(this.r, this.r * 2);
   this.y1 = random(this.r, this.r * 2);
   this.x2 = random(this.r, this.r * 2);
   this.y2 = random(this.r, this.r * 2);
   this.x3 = random(this.r, this.r * 2);
   this.y3 = random(this.r, this.r * 2);
   //随机获取colors数组里的颜色
   this.color = colors[Math.floor(random(0, colors.length))];
   //偏移步长
   this.xr = random(-5, 5);
   this.yr = random(-5, 5);
  }
  Bubble.prototype = {
   //绘制
   draw: function (context) {
    //开始路径
    context.beginPath();
    context.moveTo(this.x1, this.y1);
    context.lineTo(this.x2, this.y2);
    context.lineTo(this.x3, this.y3);
    context.lineTo(this.x1, this.y1);
    context.fillStyle = this.color;
    context.fill();
   },
   //移动
   move: function (context) {
    this.x1 += this.xr;
    this.y1 += this.yr;
    this.x2 += this.xr;
    this.y2 += this.yr;
    this.x3 += this.xr;
    this.y3 += this.yr;
    //边缘检测
    (this.x1 > width || this.x1 < 0) ? this.xr = -this.xr : null;
    (this.y1 > height || this.y1 < 0) ? this.yr = -this.yr : null;
    (this.x2 > width || this.x2 < 0) ? this.xr = -this.xr : null;
    (this.y2 > height || this.y2 < 0) ? this.yr = -this.yr : null;
    (this.x3 > width || this.x3 < 0) ? this.xr = -this.xr : null;
    (this.y3 > height || this.y3 < 0) ? this.yr = -this.yr : null;
    this.draw(context);
   }
  }

  window.onload = function () {
   //获取画布dom
   var canvas = document.querySelector('canvas');
   //设置canvas的宽高
   canvas.width = width;
   canvas.height = height;
   //获取画布上下文对象
   var context = canvas.getContext('2d');
   //数组存储bubble
   var arr = [];
   //生成粒子
   var total = 100;
   //生成例子
   for (var i = 0; i < total; i++) {
    var bubble = new Bubble();
    bubble.draw(context);
    arr.push(bubble);
   }
   var id = setInterval(function () {
    //清除
    context.clearRect(0, 0, width, height);
    //开始移动
    for (var i = 0; i < arr.length; i++) {
     arr[i].move(context);
    }
   }, 1000 / 60)
   //点击次数
   var count = 0;
   canvas.onclick = function () {
    if (count++ % 2 == 0) {
     //停止
     clearInterval(id);
    } else {
     //运行
     id = setInterval(function () {
      //清除
      context.clearRect(0, 0, width, height);
      //开始移动
      for (var i = 0; i < arr.length; i++) {
       arr[i].move(context);
      }
     }, 1000 / 60)
    }
   }
  }
 </script>
</head>

<body>
 <canvas title="点击停止,再次点击活动"></canvas>
</body>

</html>

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

Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
javascript常用对话框小集
Sep 13 Javascript
js charAt的使用示例
Feb 18 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
vue实现简单加法计算器
Oct 22 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 #Javascript
js实现删除json中指定的元素
Sep 22 #Javascript
vue使用canvas实现移动端手写签名
Sep 22 #Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 #Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 #Javascript
Vue实现开关按钮拖拽效果
Sep 22 #Javascript
JS如何生成动态列表
Sep 22 #Javascript
You might like
php empty() 检查一个变量是否为空
2011/11/10 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
动态添加js事件实现代码
2009/03/12 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
关于Python作用域自学总结
2019/06/10 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
图书室管理制度
2014/01/19 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android