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)

效果是这样：