画简单的图形

你也许看到很多html5很炫的动画，自己也很想写一个，这个需要一步一步的积累，一步一步的学，不能着急，很高兴终于改用fps的方式画图了，静态的学地差不多了，呵呵，下面是一个简单的图形代码，每秒执行60次，每次圆移动3个像素记录下圆形的轨迹碰到临界点就改变方向很简单直接上源码，又有这个程序依赖canvas库，自己也可以开发一个，很简单的库，把一些常用的canvas功能做简单的封装就ok了。这个得方式很好记录了我的学习过程，~_~ 高兴呵呵

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="lib/canvas/canvas-1.2.dev.js">
        </script>
        <title>测试Canvas 方法</title>
    </head>
    <body style="padding:0 0 0 0; margin:0 0 0 0;">
        <div style="width:100%;height:100%; padding:0 0 0 0; margin:0 0 0 0; font-size:50px;">
            <canvas style="background-color:#ffffff; width:500px; height:400px; padding:0 0 0 0; margin:0 0 0 0;"id="ctMs">
            </canvas>
        </div>
        <script type="text/javascript">
           
           
            var cvs = Canvas("ctMs", 0);
            var i = 0;
            cvs.clear();
           
            cvs.fillStyle('rgba(0, 0, 255, 0.5)');
            cvs.fillRect(150, 100, 100, 50); // ALIGN.LEFT.TOP is the default alignment
            cvs.strokeStyle('#333333');
            cvs.grid(40, 50);
            var boss = {
                x: 17,
                y: 32,
                isTr: false,
                isTl: false
            }
           
            cvs.createLayer("sp", 100, function(){
                if (boss.x >= 480) {
                    boss.isTr = true;
                }
                if (boss.x <= 0) {
                    boss.isTr = false;
                }
                if (boss.isTr) {
                    boss.x--;
                }
                else {
                    boss.x++;
                }
                if (boss.y >= 300) {
                    boss.isTl = true;
                }
                if (boss.y <= 1) {
                    boss.isTl = false;
                }
                        
                if (boss.isTl) {
                    boss.y--;
                }
                else {
                    boss.y++;
                }            
                //this.clear();
                this.fillColor('#331555');
                this.fillCircle(boss.x, boss.y, 15);
            });
           
            cvs.onKeyPress = function(keyCode, character, isCtrlPressed, isShiftPressed, isAltPressed){
                switch (keyCode) {
                    case 97:
                        boss.x -= 3;
                        break;
                    case 119:
                        boss.y += 3;
                        break;
                    case 115:
                        boss.y -= 3;
                        break;
                    case 100:
                        boss.x += 3;
                        break;
                       
                       
                }
            }
        </script>
    </body>
</html>