离屏canvas可以很好的解决canvas的性能问题
操作步骤:
1、创建离屏canvas;
2、设置离屏canvas的宽高;
3、在离屏canvas中进行绘制;
4、在离屏canvas的全部或部分绘制到正在显示的canvas上
domo:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
offscreenCanvas = document.createElement('canvas'),
offscreenContext = offscreenCanvas.getContext('2d');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var image = new Image();
image.src = 'balabal.jpg';
image.onload = function(){
context.drawImage(image, 0, 0, canvas.width, canvas.height);
offscreenContext.drawImage(image, 0, 0, canvas.width, canvas.height);
}
function oncangeDraw(){
var w = canvas.width,
h = canvas.height,
sw = w * scale,
sh = h * scale;
//直接把离屏canvas绘制到现实的canvas上
context.drawImage(offscreenCanvas, 0, 0,
offscreenCanvas.width, offscreenCanvas.height,
-sw/2 + w/2, -sh/2 + h/2, sw, sh);
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。