HTML5 Canvas炫酷背景动画特效

栏目: Html5 · 发布时间: 7年前

内容简介:对于复杂的背景动画,需要建立很多对象属性,我们可以将所有复杂的对象属性降低为单个数组形式。例如,假设我们想绘制一个2D粒子,往往具有以下基本属性:我们可以将它们存储在单个类型的数组中,而不是将这些值存储为对象属性,从而无需创建大量复杂的粒子对象。例如:

对于复杂的背景动画,需要建立很多对象属性,我们可以将所有复杂的对象属性降低为单个数组形式。例如,假设我们想绘制一个2D粒子,往往具有以下基本属性:

  • 位置:position (x, y)
  • 速度:velocity (x, y)
  • 颜色:color

我们可以将它们存储在单个类型的数组中,而不是将这些值存储为对象属性,从而无需创建大量复杂的粒子对象。

例如:

const particleCount = 200;
  const propCount = 5; // x, y, vx, vy, hue (hsla color)
  const propsLength = particleCount * propCount; // length of the props array  

  let props;

  function createParticles() {
    props = new Float32Array(propCount);

    // iterate for the length of the props array
    // increment by the number of props per particle
    for (let i = 0; i < propsLength; i += propCount) { 
      createParticle(i);
    }
  }
  
  function createParticle(i) {
    let x, y, vx, vy, hue;

    // initialize values here, can randomize, use simplex noise or anything really :)

    props.set([x, y, vx, vy, hue], i);
  }

DEMO1

Demo1使用与旋转演示相同的技术来创建发光效果。为了使方块始终朝向相同的方向,使用了 .translate().rotate() 函数来旋转每个粒子。

HTML5 Canvas炫酷背景动画特效

DEMO2

Demo2使用了模糊效果制作出了漩涡旋转发光效果。

HTML5 Canvas炫酷背景动画特效

以上所述就是小编给大家介绍的《HTML5 Canvas炫酷背景动画特效》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JSP网站开发典型模块与实例精讲

JSP网站开发典型模块与实例精讲

李振捷 / 电子工业出版社 / 2006-8 / 50.0

本书是典型模块与实例精讲丛书中的一本。 本书讲解了使用JSP开发网站系统的经典模块和工程实例,基本囊括了JSP的重点技术,对这些模块稍加修改就可以直接使用到实际项目中。为了方便本书的读者交流在学习中遇到的问题,特地在本书的服务网站上公布了很多QQ群组,读者只要拥有QQ号码,就可以参与到本书的QQ学习群组中一起讨论学习心得。本书的作者还在一定的时间给读者提供在线答疑服务。一起来看看 《JSP网站开发典型模块与实例精讲》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具