}
然后在接下来的动画中，我只需要把圈圈对象的离屏canvas画到主canvas中，这样，每一帧调用的canvasAPI就只有这么一句话：
- ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);
跟之前的for循环绘制比起来，实在是快太多了。所以当需要重复绘制矢量图的时候或者绘制多个图片的时候，我们都可以合理利用离屏canvas来预先把画面数据缓存起来，在接下来的每一帧中就能减少很多没必要的消耗性能的操作。
下面贴出1000个圈圈对象流畅版代码：
- <!doctype html>
<html lang="en">
- <head>
<meta charset="UTF-8">
- <style>
body{
- padding:0;
margin:0;
- overflow: hidden;
}
- #cas{
display: block;
- background-color:rgba(0,0,0,0);
margin:auto;
- border:1px solid;
}
- </style>
<title>测试</title>
- </head>
<body>
- <div >
<canvas id='cas' width="800" height="600">浏览器不支持canvas</canvas>
- <div style="text-align:center">1000个圈圈对象也不卡</div>
</div>
