canvas绘图总结——双缓冲绘图、拖动、缩放的实现

双缓冲

web中canvas绘图并未自带双缓冲绘图机制。为了使绘图更加流畅以及不出现闪屏的情况，思考使用双缓冲绘图来解决该问题。解决该问题最大的突破点在于canvas支持在canvas上绘制另一个canvas。实现方式如下：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var bufferCanvas = document.createElement('canvas');
bufferCanvas.width = canvas.width;
bufferCanvas.height = canvas.height;
var bufferContext = bufferCanvas.getContext('2d');

context.drawImage(bufferCanvas，0,0，canvas.widgth,canvas.height,0,0,canvas.width,canvas.height);

具有这个功能之后那么就可以在bufferCanvas上绘制我们需要绘制的图形，再将bufferCanvas绘制到canvas上即可。

函数描述如下：

拖动

具有双缓冲绘图之后，要实现拖动功能就变得简单很多了。图形绘制层分为两层，最外层的canvas看作视窗，缓冲bufferCanvas为实际绘图区域。那么为了实现拖动功能，实际上只需要改变将bufferCanvas绘制到canvas上的区域即可。使用drawImage的后面的参数即可修改显示在canvas上的区域。

为了实现此功能还需要将bufferCanvas的大小设置得比本身的canvas大，否则并不能达到拖动的本意。修改bufferCanvas大小并使其初始显示正中间内容，代码如下：

bufferCanvas.width = 5000;
bufferCanvas.height = 5000;

var x = bufferCanvas.width / 2 - canvas.width / 2;
var y = bufferCanvas.height / 2 - canvas.height / 2;
var w = canvas.width;
var h = canvas.height;

context.drawImage(bufferCanvas,x,y,w,h);

当进行拖动时，只需要改变x,y的值即可。其改变的距离取决于鼠标的位移，假设鼠标坐标mouseP(mX,mY)的位移到新坐标mouseNewP(newX,newY），则bufferCanvas需要在视窗中显示的区域的表示如下：

context.drawImage(bufferCanvas,x + (newX - mX),y + (newY - mY),w,h,0,0,w,h);

这样就可实现拖动功能，其拖动距离取决于鼠标的位移。

缩放

在有了拖动的经验后，缩放的原理就不难推导而出。所谓缩放就是改变获取bufferCanvas上的图像的大小但是不改变在canvas的显示的大小。假设在需要缩放的系数为s，那么缩放显示代码如下：

context.drawImage(bufferCanvas,x,y,w/s,h/s,0,0,w,h);

值得注意的是此处我们使用的并不是乘法而是除法，因为我们实际想要缩小图片其实是在bufferCanvas上获取更大的区域，将这块区域的限制在canvas中来达到视觉上的缩小的效果。反之，放大其实是在bufferCanvas上获取更小的区域，将这块区域填充到canvas中来达到视觉上的放大的效果。

 

参考网址：http://www.w3school.com.cn/tags/canvas_drawimage.asp