html5 canvas背景特效,HTML5 Canvas炫酷背景动画特效

对于复杂的背景动画，需要建立很多对象属性，我们可以将所有复杂的对象属性降低为单个数组形式。例如，假设我们想绘制一个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()函数来旋转每个粒子。

DEMO2

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