实现场景:定义一个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)
效果是这样: