特效描述：html5 canvas 告白气球上升 背景动画特效。html5基于canvas绘制各种卡通气球上升动画、告白气球背景动画特效。

代码结构

1. 引入JS

2. HTML代码

Balloons

var extend = function extend(base) {

for (var _len = arguments.length, extensions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

extensions[_key - 1] = arguments[_key];

}

return Object.assign.apply(Object, [{}, base].concat(extensions));

};

var parseColor = function parseColor(_ref) {

var h = _ref.h,

s = _ref.s,

l = _ref.l,

a = _ref.a;

return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';

};

var Color = extend.bind(null, { h: 0, s: 100, l: 100, a: 1 });

var Vector = extend.bind(null, { x: 0, y: 0 });

var Particle = extend.bind(null, {

pos: Vector(),

vel: Vector(),

angle: 0,

speed: 0,

radius: 0,

rotation: 0,

color: Color()

});

var colors = [Color({ h: 20, s: 100, l: 50 }), Color({ h: 200, l: 50 }), Color({ h: 300, l: 50 }), Color({ h: 100, l: 40 })];

var animationLoop = function animationLoop(scope) {

if (scope.animation) {

scope.animation(animationLoop.bind(null, scope));

}

var ctx = scope.ctx;

var canvas = ctx.canvas;

var rc = rough.canvas(canvas);

ctx.clearRect(0, 0, canvas.width, canvas.height);

scope.particles.map(function (p, i) {

p.pos.y -= p.speed;

if (i % 2) {

p.pos.x = p.pos.x + Math.sin(p.angle) * .2;

} else {

p.pos.x = p.pos.x - Math.cos(p.angle) * .2;

}

p.angle += .01;

rc.circle(p.pos.x, p.pos.y, p.radius, {

fill: parseColor(p.color),

roughness: Math.random() * 1.5,

hachureGap: p.hachureGap,

hachureAngle: p.hachureAngle

});

rc.line(p.pos.x, p.pos.y + p.radius * 1.2, p.pos.x, p.pos.y + p.radius / 2, {

bowing: Math.random() * 3

});

if (p.pos.y + p.radius * 3 < 0) {

p.pos.y = canvas.height + p.radius * 3;

p.pos.x = Math.random() * (canvas.width - p.radius);

}

});

};

var scope = {

animation: requestAnimationFrame.bind(null),

ctx: document.createElement('canvas').getContext('2d'),

title: 'Brian Douglas',

rotation: 0,

particles: []

};

~function (scope) {

var canvas = scope.ctx.canvas;

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

var particleCount = 50;

while (particleCount--) {

scope.particles.push(Particle({

pos: {

x: Math.random() * canvas.width,

y: Math.random() * canvas.height

},

speed: Math.random() + .2,

radius: Math.random() * 60 + 20,

color: colors[Math.floor(Math.random() * colors.length)],

hachureAngle: Math.random() * 90,

hachureGap: Math.random() * 8 + 1

}));

}

animationLoop(scope);

}(scope);

if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

window.addEventListener('resize', function () {

scope.ctx.canvas.width = window.innerWidth;

scope.ctx.canvas.height = window.innerHeight;

});

}