canvas例子一弹跳小球

2014年的第一篇博客

最近在看html5的canvas，对于我这么一个不懂得flash开发的孩子来说，当然还是专研canvas了，谁叫flash已经是明日黄花了。这个例子非常简单，就是简单的一个弹性小球在一个框框中不停的弹跳。

主要有两部分构成，一个是弹性小球，一个划定范围的框。

首先先用canvas的arc函数画出一个小球

		ctx.beginPath();
                ctx.arc(ballX, ballY, ballRad, 0, Math.PI * 2, false);
                ctx.fill();

在用strokeRect画出边框

ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);

然后每隔100ms检查小球的位置ballX, ballY是否超出边框，若超出边框，则将对应的运动方向取反

// 判断距离方向函数
            function changDirect () {
                var nextX = ballX + b