html网页撒花效果,Html5 Canvas 糖果派对/撒花庆祝动画

Document

html,

body {

padding: 0;

margin: 0;

background-image: url("http://img2.xcabc.com/201609/06/20160906031843214776.jpg");

width: 100%;

height: 100%;

cursor: default;

text-align: center;

font-family: 'PT Sans', sans-serif;

}

canvas {

position: absolute;

left: 0;

top: 0;

z-index: 0;

border: 0px solid #000;

}

canvas = document.getElementById("canvas");

context = canvas.getContext("2d");

width = canvas.width = window.innerWidth;

height = canvas.height = window.innerHeight;

// création d'un tableau

particle = [];

particleCount = 0,

gravity = 0.3,

colors = [

'#f44336', '#e91e63', '#9c27b0', '#