最近准备学习一些HTML5方面的知识。之前演示小球和天平的页面用的完全是老式的html+jquery，原本想做些动画效果的，结果只能退而求其次，用颜色代替了。
接下来拟定了几个小演示程序，准备用HTML5来做，此前先针对性地做一些非系统性的学习，只要能实现预定目标即可。
本次目标：在canvas画布上绘制彩色小球并实现模拟烟花般的动画效果。
程序很简单，只需要理解canvas元素，在指定位置用指定颜色绘制圆球然后逐帧形成动画就可以了。
考虑到性能因素，在球离开视觉区域或颜色完全变淡后就移除对象，并在每帧补上一定数量的球，这样也能够保证视觉效果。
演示效果如下（浏览器需支持HTML5）：
源码如下（由于结构并不复杂，代码中的注释应该能解决大部分疑惑，代码后面附有简单解析。感兴趣的话不妨复制下来自行调试）：
<!DOCTYPE html>
<html>
<head>
<title>HTML5烟火</title>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../js/requestAnimationFrame.js"></script>
<script type="text/javascript">
//配置参数
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"
}
</script>
<style type="text/css">
body {
margin: 0px;
}
#container {
width: 100%;
height: 100%;
}
#image {
background-color: #000;
}
</style>
</head>
<body>
<div id="container">
<canvas id="image">
</canvas>
</div>
</body>
</html>
代码解析：
- 在设置各项基本参数的值之后，执行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);
};
}
}());
这只是一个很简单的演示程序，预计在下一个示例作品中实现：
- 提取动画方法，不与程序逻辑混杂在一起；
- 与用户操作互动；
- 简单的碰撞检测。
谢谢你！
楼主你好，我对JS编程也很感兴趣，但是一直找不到好用的IDE，想请问下你是用什么软件编码和调试JS（或者HTML5)呢?感谢！
我用的是WebStorm