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

双缓冲

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

1var canvas = document.getElementById('canvas'); 2var context = canvas.getContext('2d'); 3var bufferCanvas = document.createElement('canvas'); 4bufferCanvas.width = canvas.width; 5bufferCanvas.height = canvas.height; 6var bufferContext = bufferCanvas.getContext('2d'); 7 8context.drawImage(bufferCanvas,0,0,canvas.widgth,canvas.height,0,0,canvas.width,canvas.height); 9

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

函数描述如下:

拖动

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

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

1bufferCanvas.width = 5000; 2bufferCanvas.height = 5000; 3 4var x = bufferCanvas.width / 2 - canvas.width / 2; 5var y = bufferCanvas.height / 2 - canvas.height / 2; 6var w = canvas.width; 7var h = canvas.height; 8 9context.drawImage(bufferCanvas,x,y,w,h); 10

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

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

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

缩放

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

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

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

 

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

代码交流 2021