html5开花动画效果代码,HTML5 Canvas藤曼系植物生长开花动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

class Line {

constructor(x, y, a) {

this.x = x;

this.y = y;

this.ang = a;

this.angVel = 0;

this.angAcc = 0.4;

}

anim() {

ctx.moveTo(this.x, this.y + 1);

this.x += 6 * Math.cos(this.ang);

this.y += 6 * Math.sin(this.ang);

this.angVel += 0.2 * (Math.random() - Math.random());

this.angVel *= this.angAcc;

this.ang += this.angVel;

if (Math.random() > 0.98) {

if (this.angAcc === 0.4) this.angAcc = 0.98;

else this.angAcc = 0.4;

}

ctx.lineTo(this.x, this.y);

if (Math.random() > 0.96 && numLines < 20) {

lines.add(new Line(width / 2, height, -Math.PI / 2));

numLines++;

}

if (this.x < -20 || this.x > width + 20 || this.y > height || this.y < 30) {

if (numLines > 1) {

numLines--;

lines.delete(this);

ctx.beginPath();

for (let i = 0; i < 2 * Math.PI; i += 0.314) {

ctx.moveTo(this.x, this.y);

ctx.lineTo(this.x + (5 * Math.random() + 12) * Math.cos(i), this.y + (5 * Math.random() + 12) * Math.sin(i));

}

ctx.stroke();

}

}

}

}

const canvas = document.getElementById('c');

const ctx = canvas.getContext('2d');

const width = canvas.width = canvas.offsetWidth * 1;

const height = canvas.height = canvas.offsetHeight * 1;

ctx.strokeStyle = "#654";

const lines = new Set();

let numLines = 0;

let y = 0;

ctx.fillStyle = "#fff";

ctx.fillRect(0, 0, width, height);

lines.add(new Line(width / 2, height, -Math.PI / 2));

function run() {

requestAnimationFrame(run);

ctx.drawImage(canvas, 0, 1);

for (let line of lines) {

ctx.beginPath();

line.anim();

ctx.stroke();

}

}

run();