主要用到的就2個關鍵技術點：
ctx.globalAlpha = ‘0.85’; //設置主canvas的繪制透明度 臨時canvas備份主canvas的歷史圖像，再疊加到主canvas上。
繪制過程：
首先需要知道動畫的起終點，然後繪制移動的圓，計算出中間的點的位置，定時繪制，每次繪制都移動一點位置，達到運動的效果，這是普通的運動的圓的效果。
繪制的時候設置當前canvas的透明度globalAlpha 為0.85
需要給運動中的圓加上運動過程的軌跡效果，這裡是用到一個臨時的canvas來配合，每次需要繪制一個新圓之前都把之前的圖像給繪制到臨時的canvas中，然後等新圓畫完後再把臨時canvas的圖像繪制回主canvas中，軌跡的效果。
這裡關鍵的就是由於設置瞭globalAlpha，每次繪制一次備份的canvas圖片都會把它的透明度設為0.85，達到瞭逐漸減小透明度的效果，直到為0，這樣整體看上去效果就是運動的圓的後面跟的圓逐個透明度減小，知道為0，達到瞭運動軌跡的效果。
movecircle.js
var canvas = document.querySelector('#canvas'),
ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;
var backDom = document.createElement('canvas'),
backCtx = backDom.getContext('2d');
backDom.width = canvas.width;
backDom.height = canvas.height;
document.body.appendChild(backDom); //測試使用
ctx.globalAlpha = 0.85; //關鍵
function draw(options) {
backCtx.globalCompositeOperation = 'copy';
backCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = 'rgba(7,120,249,1)';
ctx.fill();
ctx.drawImage( backDom, 0, 0, backDom.width, backDom.height);
}
var start = {
x: 25,
y: 25,
r: 10
};
var end = {
x: 300,
y: 300,
r: 10
};
function render() {
if (start.x < end.x && start.y < end.y) {
draw(start);
start.x += 5;
start.y += 5;
setTimeout(arguments.callee, 50);
}
}
render();
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0;
margin:0;
background:#000;
}
#main{
height:100%;
}
canvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/movecircle.js"> </script>
</body>
</html>