canvas簡單動畫

實現場景：定義一個1000*800的方框，圓球在其中移動，碰撞到邊框彈回的動畫。方框背景是半徑為10的小圓球組成。鼠標移動到移動圓球時，圓球停止運動。

html代碼：

<div>
    <canvas id="myCanvas"></canvas>
    <canvas id="bgCanvas" style="display: none" width="1000" height="800"></canvas>
</div>

 

js代碼：

var canvas = document.getElementById("myCanvas");
var bgCanvas = document.getElementById("bgCanvas");
canvas.width = 1000;
canvas.height = 800;
var ctx = canvas.getContext("2d");
var bgctx = bgCanvas.getContext("2d");
var rectX = 50,
    rectY = 50,
    dirX = 1,
    dirY = 1,
    speed = 10;
var isMouseMove = false;
// 判斷鼠標移入，小圓球停止運動
canvas.onmousemove = function (e) {
    var offsetX = e.offsetX;
    var offsetY = e.offsetY;
    if (Math.pow(offsetX-rectX, 2) + Math.pow(offsetY-rectY, 2) > Math.pow(50, 2)) {
        isMouseMove = false;
    } else {
        isMouseMove = true;
    }
};
// 通過離屏技術，將背景靜態場景繪制在離屏上。
var bgCanvasC = function () {
    for(var i = 10; i < canvas.width; i+=20){
        for( var j = 10; j < canvas.height; j+=20) {
            bgctx.beginPath();
            bgctx.arc(i, j, 10, 0, 2*Math.PI);
            bgctx.stroke();
        }
    }
};
bgCanvasC();
// 動畫部分
setInterval(function () {
    if (!isMouseMove) {
        rectX += dirX * speed;
        rectY += dirY * speed;
        ctx.fillStyle="#ffffff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.strokeRect(0, 0, 1000, 800);
        ctx.drawImage(bgCanvas, 0, 0, bgCanvas.width, bgCanvas.height, 0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.fillStyle = "#000000";
        ctx.arc(rectX, rectY, 50, 0, 2*Math.PI);
        ctx.fill();
        if (rectX >= canvas.width - 50) {
            dirX = -1;
        } else if (rectX <= 50) {
            dirX = 1;
        }

        if (rectY >= canvas.height - 50) {
            dirY = -1;
        } else if (rectY <= 50) {
            dirY = 1;
        }
    }
}, 100)

效果是這樣：