温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎样使用HTML5 Canvas创建动态粒子网格动画

发布时间:2022-03-08 10:25:47 来源:亿速云 阅读:168 作者:小新 栏目:web开发

小编给大家分享一下怎样使用HTML5 Canvas创建动态粒子网格动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

添加一个canvas了:

  下面是样式:

  #canvas{

  position: absolute;

  display: block;

  left:0;

  top:0;

  background: #0f0f0f;

  z-index: -1;

  }

  上面canvas的z-index: -1的作用是可以放在一些元素的下面当做背景。

  为了确保canvas能够充满整个浏览器,所以要将canvas的宽高设置成和浏览器一样:

  function getSize(){

  w = canvas.width = window.innerWidth;

  h = canvas.height = window.innerHeight;

  }

  上面w和h分别代表浏览器的宽高。

  获得了浏览器的宽高,接下来就是在里面画粒子了,这里我们需要提前定义一些粒子的参数:

  var opt = {

  particleAmount: 50, //粒子个数

  defaultSpeed: 1, //粒子运动速度

  variantSpeed: 1, //粒子运动速度的变量

  particleColor: "rgb(32,245,245)", //粒子的颜色

  lineColor:"rgb(32,245,245)", //网格连线的颜色

  defaultRadius: 2, //粒子半径

  variantRadius: 2, //粒子半径的变量

  minDistance: 200 //粒子之间连线的最小距离

  };

  上面的速度变量和半径变量都是为了保证粒子的大小和速度不是一模一样。

  然后我们再创建一个类用来初始化粒子,代码比较长,我都加了注释:

  function Partical(){

  this.x = Math.random()*w; //粒子的x轴坐标

  this.y = Math.random()*h; //粒子的y轴坐标

  this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random(); //粒子的运动速度

  this.directionAngle = Math.floor(Math.random()*360); //粒子运动的方向

  this.color = opt.particleColor ; //粒子的颜色

  this.radius = opt.defaultRadius+Math.random()*opt.variantRadius; //粒子的半径大小

  this.vector = {

  x:this.speed * Math.cos(this.directionAngle), //粒子在x轴的速度

  y:this.speed * Math.sin(this.directionAngle) //粒子在y轴的速度

  }

  this.update = function(){ //粒子的更新函数

  this.border(); //判断粒子是否到了边界

  this.x += this.vector.x; //粒子下一时刻在x轴的坐标

  this.y += this.vector.y; //粒子下一时刻在y轴的坐标

  }

  this.border = function(){ //判断粒子是都到达边界

  if(this.x >= w || this.x<= 0){ //如果到达左右边界,就让x轴的速度变为原来的负数

  this.vector.x *= -1;

  }

  if(this.y >= h || this.y <= 0){ //如果到达上下边界,就让y轴的速度变为原来的负数

  this.vector.y *= -1;

  }

  if(this.x > w){ //下面是改变浏览器窗口大小时的操作,改变窗口大小后有的粒子会被隐藏,让他显示出来即可

  this.x = w;

  }

  if(this.y > h){

  this.y = h;

  }

  if(this.x < 0){

  this.x = 0;

  }

  if(this.y < 0){

  this.y = 0;

  }

  }

  this.draw = function(){ //绘制粒子的函数

  ctx.beginPath();

  ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);

  ctx.closePath();

  ctx.fillStyle = this.color;

  ctx.fill();

  }

  }

以上是“怎样使用HTML5 Canvas创建动态粒子网格动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI