HTML
<canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas>
JS
1.获取上下文
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
2.实现一个球类
1 class circle {
2 constructor() {
3 this.x = 25,
4 this.y = 25,
5 this.mx = Math.random()*5,
6 this.my = Math.random()*3,
7 this.radius = 25,
8 this.color = 'blue',
9 this.draw = function () {
10 ctx.beginPath();
11 ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
12 ctx.fillStyle = this.color;
13 ctx.fill();
14 }
15 }
16
17 };
3.new一个球
let ball = new circle();
4.实现动画函数
const move = (function () {
// 清除画布
ctx.clearRect(0,0, canvas.width, canvas.height);
// 重新绘制圆
ball.draw();
// 移动圆
ball.x += ball.mx; // x坐标递增
ball.y += ball.my; // y坐标递增
// x轴坐标加移动的距离大于画布宽度(到达右边界) 或 x轴坐标加移动的距离等于0(到达左边界)
if (ball.x + ball.mx > canvas.width || ball.x + ball.mx < 0) {
ball.mx = -ball.mx; // x轴坐标递减
};
// y轴坐标加移动的距离大于画布宽度(到达下边界) 或 y轴坐标加移动的距离等于0(到达上边界)
if (ball.y + ball.my > canvas.height || ball.y + ball.my < 0) {
ball.my = -ball.my; // y轴坐标递减
};
// 递归调用当前方法
window.requestAnimationFrame(arguments.callee);
})();