HTML5 入门测试例子运动的球

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5</title>
<script>

    var    ctx;
    var xx = 55;
    var yy = 250;
    var x = 05;
    var y = 5;
    var createPI = function()
    {
        //清除画布内容
        ctx.clearRect(0,0,800,600);
        //设置画布背景
        ctx.fillStyle = "#CCCCCC";
        ctx.fillRect(0,0,800,600);
        
        //设置球体阴影
        ctx.shadowBlur = 2;
        ctx.shadowColor = "#000000";
        
        //创建圆
        ctx.beginPath();
        ctx.fillStyle = "#000000";
        ctx.arc(xx,yy,50,0,2*Math.PI,false);
        
        
        
        
        //填充圆
        var grd = ctx.createRadialGradient(xx,yy,60,xx,yy,0);
        grd.addColorStop(0,"#000000");
        grd.addColorStop(1,"#FFFFFF");
        ctx.fillStyle=grd;

        
        //显示圆
        ctx.stroke();
        
        //显示填充
        ctx.fill();
        
        if(xx == 750)
        {
            x = -5;
        }
        if(xx == 50)
        {
            x = 5;
        }
        
        if(yy == 550)
        {
            y = -5;
        }
        if(yy == 50)
        {
            y = 5;
        }
    
        xx += x;
        yy += y;
        
    }
    
    function init(){
        ctx = document.getElementById("canvas").getContext("2d");
        setInterval(createPI,25);
        }
</script>
</head>

<body onload="init();">
    <div align="center">
        <h1>HTML5 运动的球</h1>
        <canvas id="canvas" width="800" height="600" style="border:1px solid #000000;">
            你的浏览器不支持HTML5标签。
        </canvas>
    </div>
    
   
</body>
</html>