canvas优化
比如我现在有一个需求，在一个用js画了各种图形的画布上增加一个十字线，随鼠标移动的那种。
-
最直接暴力的画法
最直接暴力的的方式就是写一个鼠标监听，然后每次移动鼠标，清空画布，再把这些图形画一遍上去，然后画十字线
-
离屏canvas优化
这样细心的小伙伴会发现前面画图的部分可能会多余，于是我们可以利用离屏canvas来避免前面图形的重复绘制，创建一个canvas，然后再这个canvas上只绘制一次你的图形，保存在内存中，然后每次鼠标移动的时候把画布清空，并用drawImage方法把离屏canvas画在dom中的canvas上，（其实更推荐putImageData来画，前面需要清空画布并绘图，这个只需一步），然后再在上屏canvas上绘制十字线（创建另一个离屏canvas是浪费的，因为十字线绘制比较简单，而且会绘制多余的像素，即使当前像素没有内容，它至少也要遍历一次吧，个人认为，有错误请告知矫正）
-
进一步优化
虽然这样已经避免了图形的重复绘制，但是我实际上只需要在画布上加十字线而已，我每次在鼠标移动却需要画一张位图和两条线，很浪费，实际上我们可以避免
同样我画一个离屏canvas作为静态资源，然后一开始把离屏canvas绘制到上屏canvas中，然后我第一次移动鼠标，我就在上屏canvas鼠标处画两条线，后面移动鼠标，我就把被十字线盖住的图形部分用离屏canvas.getImageData取出来来，然后放到上屏canvas原来的位置上，然后再在鼠标位置画线，这样是不是好很多呢，没有重复绘制较大的位图，只是重新绘制了几条线像素，很多在大图上更新小部分的图形都可以这样，但是如果更新的像素部分和上屏canvas差不多大的话，还是分成两个离屏canvas吧，操作比较方便