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 + ballVX,                    nextY = ballY + ballVY;                if (nextX > boxRoundX) {                    ballVX = -ballVX;                    nextX = boxRoundX;                }                if (nextX < inboxRoundX) {                    ballVX = -ballVX;                    nextX = inboxRoundX;                }                if (nextY > boxRoundY) {                    ballVY = -ballVY;                    nextY = boxRoundY;                }                if (nextY < inboxRoundY) {                    ballVY = -ballVY;                    nextY = inboxRoundY;                }                ballX = nextX;                ballY = nextY;            }

最後清除畫布，每隔100ms，依照當前座標位置重新畫出小球和邊框的圖案

效果如所示：

也可以把小球替換成自己本地檔案夾下的圖片

var img = new Image();img.src = 'image/1.jpg';// 繪製圖形                ctx.drawImage(img, ballX - ballRad, ballY - ballRad, 2 * ballRad, 2 * ballRad);

想看原始碼和注釋的請訪問我的github：https://github.com/chenkehxx/practice/commit/65067f7bb7948abe94b052f3e69fc2b1892ab167