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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
viewer.js实现图片预览功能
Jun 24 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中模拟POST传递数据的两种方法分享
2011/09/16 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
JS的get和set使用示例
2014/02/20 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
详解Python的Lambda函数与排序
2016/10/25 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python 画条形图(柱状图)实例
2020/04/24 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
sort命令的作用和用法
2013/08/25 面试题
办理退休介绍信
2014/01/09 职场文书
超市创业计划书
2014/09/15 职场文书
运动员入场词
2015/07/18 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android