一、为什么选择 HTML5

　　HTML5 边玩边学算上这篇已经是第七篇了，在这篇开始之前，我想先说明一下为什么叫“HTML5”边玩边学，因为有人对 HTML5 提出质疑，毕竟他是一个新生事物。我承认我用 HTML5 来吸引眼球了，如果看过边玩边学系列的每一篇，你会发现前六篇文章内容的和 HTML5 关系不是太大，真正的内容其实是 2D 图形图像编程的学习笔记。

　　如果我们想学习 2D 编程，其实可供选择的编程环境数不胜数：MFC、Delphi都有图形图像处理功能(即GDI),Java、.NET 更不用说了，如果你支持开源，GTK、QT、wxPython 也是不错的选择，Flash 更是拿手好戏，甚至几个流行的只能手机平台应该也有 2D 模块。

　　如果你选择了上面任何一款编程环境学习 2D 编程，你会发现他们的内容基本上是一样的：线型、填充、颜色、渐变、图像、组合、裁剪区、变形等等，甚至连函数名很多都是一摸一样，毕竟他们的理论基础都是图形学。

　　搞清楚我们真正想学习什么以后，其实编程环境只是个工具而已，我们根据个人喜好，选择最方便的一款来使用。其实我更青睐 Python 编程环境，只是如果我用了Python，估计跟我交流的人就不会太多了，大家机器里安装 Python 运行时的估计不会太多。

　　那么为什么选择 HTML5 而不是其他呢？首先，Javascript 语法简洁灵活，相应的函数库小巧但是够用， HTML5 Canvas 标签的 2D 表现能力也达到了要求，Chrome 浏览器的运行速度让人满意。除此之外，我们不用安装笨重的集成开发环境，不需要安装运行时，我们只需要一个加强功能的记事本、一个浏览器就可以去实践我们的想法，并且直接将效果呈现在网络上。我们只是发表文章同其他人分享自己的想法而已，至于平台、框架、语言特性，这些无关的东西当然牵扯的越少越好，这就是我选择 HTML5 的原因。

　　所以，请大家不要误解了标题的含义：这个系列并不是 HTML5 的学习笔记，而只是用 HTML5 来展现一些知识内容而已，你更多关注的应该是知识和内容本身，你可以在任何其他一款编程环境下再现他们。

　　二、动画初步

　　动画就是一系列连续的画面按顺序呈现出来而已，只是，在电影电视中，这些画面实现已经被准备好了，而在电脑程序中，我们见到每一瞬间的画面都是即时绘制的，大体流程可以表述如下：

　　a、轻微改变图形的数据（坐标、形状、颜色等等）

　　b、清空画布

　　c、绘制图形

　　d、回到步骤 a

　　当然，这里只是给出了一个最简单的流程框架，要实现复杂的动画可能还要考虑更多的问题，比如局部清除、碰撞检测之类的。

　　另外，绘制过程中有两个速度需要控制：

　　第一个是绘制速度，即每秒钟绘制多少次（帧），或者也可以这样说，每一帧暂停多少时间。如果你的动画每一帧都是一个样子，只是位置不同，这个速度影响不大。

　　第二个图形移动的速度。

　　所以，千万不要把这两个速度搞混了，绘制的越快，只能代表动画更流畅，但并不代表你的图像移动的更快。

　　使用 HTML5 绘制动画基本上就是上面这个流程，只是你还需要注意两点：

　　1、为了方便绘制的图形，我们经常会改变上下文对象的的状态，所以在绘制图形前后，千万别忘了保存和恢复状态，如果你不太了解状态是什么，请看前面的一篇文章《HTML5边玩边学（6）：汽车人，变形......》

　　2、我们需要将整个绘制动作放到定时器里面，否则整个浏览器将失去响应。Javascript 有两个定时器方法，分别是：

　　setInterval(code,millisec) 和 setTimeout(code,millisec)

　　这两个方法我就介绍了，可以去 Google 相关的资料。

　　下面我们给出一个上下移动方块的小动画，当遇到顶部或者底部时，会改变方向。代码如下：

<canvas id="canvas1" width="250" height="300" style="background-color:black">
    你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
帧数：<input  id="txt1" type="text" value="25"/><br/>
每次移动距离：<input type="text" id="txt2" value="10"/><br/>
<input type="button" value="开始" onclick="move_box()"/>
<input type="button" value="暂停" onclick="stop()"/>

<script type="text/Javascript">
    //定时器
    var interval=null;
    
    //停止动画
    function stop(){
        clearInterval(interval);
    }

    //===================================================================
    //基本动画
    //====================================================================
    function move_box(){
        //停止动画
        stop();
        //移动速度
        var delta=parseInt(document.getElementById('txt1').value);
        //每秒绘制多少次
        var fps=parseInt(document.getElementById('txt2').value);

        //画布对象
        var canvas=document.getElementById("canvas1")
        //获取上下文对象
        var ctx = canvas.getContext("2d");
        //设置颜色
        ctx.fillStyle="red";
        
        //方块的初始位置
        var x=100;var y=50;
        //方块的长度和宽度
        var w=30;var h=30;
        
        //开始动画
        interval = setInterval(function(){
            //改变 y 坐标
            y=y+delta;
            //上边缘检测
            if(y<0){
                y=0;
                delta=-delta;
            }
            //下边缘检测
            if((y+h)>canvas.getAttribute("height")){
                y=canvas.getAttribute("height")-h;
                delta=-delta;
            } 
            //清空画布
            ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
            //保存状态
            ctx.save();
            //移动坐标
            ctx.translate(x,y);
            //重新绘制
            ctx.fillRect(0,0,w,h);
            //恢复状态
            ctx.restore();
        },1000/fps);
    }    
</script>        

        

        
        
      
        
it知识库：HTML5边玩边学（7）：动画初步 之 飞舞的精灵，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。