html烟花代码在线编程,HTML5 Canvas烟花动画 可控制烟花速度和大小

本文作者html5tricks，转载请注明出处

这款

下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。

HTML代码：

HTML的结构非常简单，即构造了一个canvas容器，我们会利用JS在这个容器中生成一个Canvas对象。看最后的JS代码你就会知道了。

CSS代码：

#canvas-container {

background: #000 url(bg.jpg);

height: 400px;

left: 50%;

margin: -200px 0 0 -300px;

position: absolute;

top: 50%;

width: 600px;

z-index: 2;

}

canvas {

cursor: crosshair;

display: block;

position: relative;

z-index: 3;

}

canvas:active {

cursor: crosshair;

}

#skyline {

background: url(skyline.png) repeat-x 50% 0;

bottom: 0;

height: 135px;

left: 0;

position: absolute;

width: 100%;

z-index: 1;

}

#mountains1 {

background: url(mountains1.png) repeat-x 40% 0;

bottom: 0;

height: 200px;

left: 0;

position: absolute;

width: 100%;

z-index: 1;

}

#mountains2 {

background: url(mountains2.png) repeat-x 30% 0;

bottom: 0;

height: 250px;

left: 0;

position: absolute;

width: 100%;

z-index: 1;

}

#gui {

right: 0;

position: fixed;

top: 0;

z-index: 3;

}

CSS代码没什么特别，主要也就定义一下背景色和边框之类的。

接下来是最重要的Javascript代码。

Javascript代码：

self.init = function(){

self.dt = 0;

self.oldTime = Date.now();

self.canvas = document.createElement('canvas');

self.canvasContainer = $('#canvas-container');

var canvasContainerDisabled = document.getElementById('canvas-container');

self.canvas.onselectstart = function() {

re