JavaScript实例：运动的小球

        本篇博文通过制作一个小球运动动画的实例，来学习在HTML5的画布上实现动画制作的方法，同时理解面向对象程序设计的基本思想。

       1．绘制小球 

        先在HTML页面中设置一个画布。

         

         

        再将小球画在canvas（画布）上面。

        可编写如下的HTML代码。

运动的小球（一）

   var canvas = document.getElementById('myCanvas');

   var context = canvas.getContext('2d');

   var x=100, y=100,radius=25;

   context.beginPath();

   context.arc(x, y, radius, 0, Math.PI*2, true);

   context.closePath();

   context.fillStyle = "blue";

   context.fill();

         其中，变量x、y、radius分别是小球的圆心坐标（x，y）和半径radius。

        将上述HTML代码保存到一个html文