离屏操作：
1.创建一个新的离屏canvas;
2.把一些复杂额绘画操作（背景），画在离屏canvas上；
3.将离屏canvas通过drawImage（离屏canvas对象，x1,y1,offcanvas.width,offcanvas.height,x2,y2,canvas.width,canvas.height）拷贝到原始的canvas上，减少不断绘制复杂操作，提高性能-----最后使用css：display：none将离屏canvas隐藏；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>离屏canvas</title>
<style>
canvas{
border: 1px solid red;
}
#offCanvas{
/* display: none; */
}
</style>
</head>
<body>
<canvas id="myCanvas">您的浏览器不支持canvas</canvas>
<canvas id="offCanvas">您的浏览器不支持canvas</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var offCanvas = document.getElementById("offCanvas");
var offCtx = offCanvas.getContext("2d");
var posx = 0,posy = 0,dir = 1,isMouseInRect = false;
var drawALot = function(){
for(var k=0;k<20;k++){
for(var i=0;i<canvas.width;i+=10){
for(var j=0;j<canvas.height;j+=10){
offCtx.beginPath();
offCtx.arc(i,j,5,0,2*Math.PI,true);
offCtx.stroke();
}
}
}
}
canvas.onmousemove = function(e){
var mouseX = e.offsetX;
var mouseY = e.offsetY;
if(mouseX > posx && mouseX < posx + 50 && mouseY > posy && mouseY < posy +50){
isMouseInRect = true;
}else{
isMouseInRect = false;
}
}
setInterval(function(){
if(!isMouseInRect){
posx += 10 *dir;
}
//清空画布区域
ctx.clearRect(0,0,canvas.width,canvas.height);
//drawALot();
//使用drawImage(canvas对象)拷贝到原始canvas上
ctx.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,0,0,canvas.width,canvas.height);
ctx.fillRect(posx,posy,50,50);
if(posx+50 >= canvas.width){
dir = -1;
}else if(posx <=0){
dir = 1;
}
},100);
drawALot();
</script>
</body>
</html>
