HTML5入门习作1:烟火

最近准备学习一些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);
        };
    }
}());

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

  • 提取动画方法,不与程序逻辑混杂在一起;
  • 与用户操作互动;
  • 简单的碰撞检测。
0

4 comments

  1. chaos says:

    楼主你好,我对JS编程也很感兴趣,但是一直找不到好用的IDE,想请问下你是用什么软件编码和调试JS(或者HTML5)呢?感谢!

    0

发表评论

电子邮件地址不会被公开。 必填项已用*标注