html5 push入门,HTML5入门习作1：烟火

最近准备学习一些HTML5方面的知识。之前演示小球和天平的页面用的完全是老式的html+jquery，原本想做些动画效果的，结果只能退而求其次，用颜色代替了。

接下来拟定了几个小演示程序，准备用HTML5来做，此前先针对性地做一些非系统性的学习，只要能实现预定目标即可。

本次目标：在canvas画布上绘制彩色小球并实现模拟烟花般的动画效果。

程序很简单，只需要理解canvas元素，在指定位置用指定颜色绘制圆球然后逐帧形成动画就可以了。

考虑到性能因素，在球离开视觉区域或颜色完全变淡后就移除对象，并在每帧补上一定数量的球，这样也能够保证视觉效果。

演示效果如下(浏览器需支持HTML5)：

源码如下(由于结构并不复杂，代码中的注释应该能解决大部分疑惑，代码后面附有简单解析。感兴趣的话不妨复制下来自行调试)：

HTML5烟火

//配置参数

var maxballcount = 300 //小球最大数量

var ballradius = 4//小球半径

var startspeedx = 2//横向初速度范围(-x到x)

var startspeedy = 6//纵向初速度范围(向上,-y到0)

var gravity = 0.1 //重力加速度

var colorweaken = 0.008//颜色衰减速度

var newballcount = 4//每轮补球最大数量

var tail = 0.2//小球拖尾效果(1为无，0为拖尾不消失)

//全局对象

var canvas //绘图对象

var context //绘图内容

var imgData //当前图形

var balls = new Array() //小球数组

var framestarttime//计算帧数开始时间

var framecount = 0//上次计数清空以来经过的帧数

var lastframecount = 0//上一秒的帧数

//页面加载

$(function () {

init()

})

//初始化

function init() {

canvas = document.getElementById("image")

if (!canvas.getContext) self.location = "/nohtml5.html"

else {

var container = $("#container")

container.width($(window).width())

container.height($(window).height())

canvas.width = container.width()

canvas.height = container.height()

context = canvas.getContext("2d")

context.font = "16px Arial"

framestarttime = new Date()

//开始动画

animeframe()

}

}

//运行动画

function animeframe() {

//绘制半透明遮罩，淡化上一帧的颜色以达到拖尾效果

context.fillStyle = "rgba(0,0,0," + tail + ")"

context.fillRect(0, 0, canvas.width, canvas.height)

var newballs = new Array()//下一帧小球数组

for (var i in balls) {

var ball = balls[i]

ball.speedy += gravity//重力

ball.x += ball.speedx

ball.y += ball.speedy

ball.alpha -= colorweaken

if (ball.x > 0 && ball.x < canvas.width && ball.y > 0 && ball.y < canvas.height && ball.alpha > 0) {

//只有小球在界内并尚未完全透明时才显示并保留到下一帧

newballs.push(ball)

drawball(ball)

}

}

//如果数量不足(初始，或有球出界)，则补球，但不能超过最大数量

if (newballs.length < maxballcount) {

for (var i = 0; i < Math.min(newballcount, maxballcount - newballs.length); i++) {

newballs.push(generaterandomball())

}

}

//交换帧

balls = newballs

newballs = null

//计算并在左上角绘制帧数

var thisframetime = new Date()

if (thisframetime - framestarttime >= 1000) {

lastframecount = framecount

framecount = 0

framestarttime = thisframetime

}

framecount++

context.fillStyle = "#000"

context.fillRect(0, 0, 80, 40)

context.fillStyle = "#FF0"

context.fillText("FPS:" + lastframecount, 10, 20)

requestAnimationFrame(animeframe)

}

//绘制单个小球

function drawball(ball) {

if (!ball) return

context.beginPath()

context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2, true)

context.closePath()

context.fillStyle = "rgba(" + ball.color + "," + ball.alpha + ")"

context.fill()

}

//生成随机颜色和速度的球

function generaterandomball() {

var ball = new Object()

//初始位置在中央区域

ball.x = Math.round(Math.random() * canvas.width / 10) + (canvas.width / 2 - canvas.width / 20)

ball.y = Math.round(Math.random() * canvas.height / 10) + (canvas.height / 2 - canvas.height / 20)

ball.r = ballradius

ball.color = randomcolor()

ball.alpha = 1

//小球初速度，横向随机，纵向默认向上

ball.speedx = Math.round(Math.random() * startspeedx * 2) - startspeedx

ball.speedy = -Math.round(Math.random() * startspeedy)

return ball

}

//生成RGB字符串格式的颜色

function randomcolor() {

var yellow = Math.round(Math.random() * 255)

return "255," + yellow + ",0"

}

body {

margin: 0px;

}

#container {

width: 100%;

height: 100%;

}

#image {

background-color: #000;

}

代码解析：

在设置各项基本参数的值之后，执行init()方法初始化页面；

初始化画布尺寸和基本对象，然后执行animeframe()开始动画；

每个animeframe()显示一帧动画，结束后递归自己显示下一帧；

每帧要通过各小球的位置和速度计算运动轨迹，并计算重力加速度对纵向速度的影响；

小球出界则从数组中移除。这里使用的是相反的方法：只有检测到在界内的才添加到新数组，循环完成后将新旧数组交换；

运动中的小球颜色逐渐变淡(增加alpha透明度)；

使用drawball()方法绘制小球；

如果小球数量太少则补球；

生成随机球的方法是generaterandomball()，颜色在全红(255,0,0)到全黄(255,255,0)间随机选择。只需要第二个值取随机即可；

每秒统计帧数并显示在左上角。

补注：旧版代码使用的是setTimeout实现动画。加入一段兼容性脚本后，改用requestAnimationFrame代替setTimeout来达到更好的性能，并在左上角加入帧数显示(用于测试不同浏览器和设备上的性能)

脚本如下(已保存到单独的requestAnimationFrame.js文件中)：

//requestAnimationFrame动画方法的兼容性

(function() {

var lastTime = 0;

var vendors = ['webkit', 'moz'];

for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了

window[vendors[x] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame) {

window.requestAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));

var id = window.setTimeout(function() {

callback(currTime + timeToCall);

}, timeToCall);

lastTime = currTime + timeToCall;

return id;

};

}

if (!window.cancelAnimationFrame) {

window.cancelAnimationFrame = function(id) {

clearTimeout(id);

};

}

}());

这只是一个很简单的演示程序，预计在下一个示例作品中实现：

提取动画方法，不与程序逻辑混杂在一起；

与用户操作互动；

简单的碰撞检测。

0