软件项目技术点(11)——大图变小图提高绘图性能

AxeSlide软件项目梳理   canvas绘图系列知识点整理

因为用户有可能会插入大量图片到软件中，canvas绘制起来性能堪忧，缩放或者平移画布会出现卡顿的现象。这跟图片的大小有很大关系，越是高清大图，绘制到canvas上，特别是在canvas缩小的情况下，越耗费性能。

所以我们打算分等级去绘制图片，图片在不同显示尺寸下绘制的源图是不一样的，在符合需要优化的条件下，我们会新建一个canvas将图片绘制到上面，这个canvas的大小设置的没有原高清图那么大，接下来绘制的时候就会根据需要展示的大小决定绘制原图片还是绘制canvas对象。绘制canvas对象也是调用api方法。

// 将这个新创建的canvas画到真正显示的canvas上
ctx.drawImage(this.canvas, x, y);