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

妖狐艹你老母 2022-02-02 09:27 1036阅读 0赞

### 双缓冲 ###

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上即可。

函数描述如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1aWN5QWN0aXZlR2lsYmVydA_size_16_color_FFFFFF_t_70][]

### 拖动 ###

具有双缓冲绘图之后，要实现拖动功能就变得简单很多了。图形绘制层分为两层，最外层的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][http_www.w3school.com.cn_tags_canvas_drawimage.asp]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1aWN5QWN0aXZlR2lsYmVydA_size_16_color_FFFFFF_t_70]: /images/20220202/e466f1bff8e248e1a883345580cfdc1b.png
[http_www.w3school.com.cn_tags_canvas_drawimage.asp]: http://www.w3school.com.cn/tags/canvas_drawimage.asp