这是一款Html5 canvas炫酷背景动画特效。该特效利用html5 canvas API和Es6来制作,其中结合了simplex-noise.js,可生成效果非常炫酷的网页背景动画特效,可用于网站首页或产品形象展示页面。
对于复杂的背景动画,需要建立很多对象属性,我们可以将所有复杂的对象属性降低为单个数组形式。例如,假设我们想绘制一个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
DEMO1
Demo1使用与旋转演示相同的技术来创建发光效果。为了使方块始终朝向相同的方向,使用了.translate()
和.rotate()
函数来旋转每个粒子。
DEMO2
Demo2使用了模糊效果制作出了漩涡旋转发光效果。
以上就上有关HTML5Canvas炫酷背景动画特效的相关介绍,要了解更多HTML5,javascript内容请登录学步园。