html canvas签名 离屏,Canvas离屏操作

## Canvas离屏操作

~~~

.canvas{

border: 1px solid red;

}

#offCanvas{

display: none;

}

您的浏览器不支持canvas

您的浏览器不支持canvas

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var offCanvas = document.getElementById("offCanvas");

var offCtx = offCanvas.getContext("2d");

//把一些复杂的绘画操作，放在离屏Canvas上

var drawAlot = function() {

for(var k = 0; k < 20; k++){

for(var i = 0; i < offCanvas.width; i+=10) {

for(var j = 0; j < offCanvas.height; j+=10) {

offCtx.beginPath();

offCtx.arc(i, j ,5, 0, 2*Math.PI, true);

offCtx.stroke();

}

}

}

}

var posx = 0;

var posy = 0;

var dir = 1;

var isMouseInRect = false;

canvas.onmousemove = function(e) {

console.log(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();

//真正要用到复杂的绘画的时候，从离屏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();

~~~