我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
详细说明
在项目中，如果有涉及到移动效果的，基本上都是css3和js的计时器，这两种都可以实现移动的效果，这次用canvas来实现一次，不过说到底还是js实现的，不过不是采用计时器。
先准备上canvas画布的区域,并加上该有的样式。
// html
<div id="app">
<canvas width="600" height="600" id="canvas"><canvas>
</div>
// css
#canvas {
border: 1px solid #ccc;
}
// js
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
设定小球的速度，即每次要移动多少；设定小球的中点的位置，每次移动都需要更新小球的中点，这样小球才会改变位置。
let xspeed = 2;
let yspeed = 4;
const ball = {
x: 300,
y:300
}
let gradient = null;
为了不让小球跑到我们所设定的区域外面去，必须得给它限定活动范围；如果小球中心点的x轴如果等于或者小于小球的半径，那么小球已经到的最左侧的，这时不能再往左了，必须要变换方向，向反方向前进，y轴亦是如此，x如果大于等于画布的宽度减去小球半径，那么小球已经到了最右侧了，必须改变方向，向反方向前进，y轴也是一样的。
if (ball.x < 20 || ball.x > canvas.clientWidth - 20) {
xspeed = -xspeed;
}
if (ball.y < 20 || ball.y > canvas.clientHeight - 20) {
yspeed = -yspeed;
}
在每一次更新中，小球是不断的删除原本的效果，更新位置数据，然后再绘制出来，展现出此时的位置，这样在每一帧中，小球看起来就像是在运动一样，这里我们不用计时器，使用一个API:windows.requestAnimationFrame()。
function draw() {
if (ball.x < 20 || ball.x > canvas.clientWidth - 20) {
xspeed = -xspeed;
}
if (ball.y < 20 || ball.y > canvas.clientHeight - 20) {
yspeed = -yspeed;
}
context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
context.beginPath();
gradient = context.createRadialGradient((ball.x-5), (ball.y-5), 0, ball.x, ball.y, 20,);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'gray');
context.fillStyle = gradient;
context.arc(ball.x, ball.y, 20, 0, 2*Math.PI);
context.fill();
ball.x += xspeed;
ball.y += yspeed;
window.requestAnimationFrame(draw);
}
draw();
