使用Wxml2Canvas踩过的坑

https://github.com/wg-front/wxml2canvas

最近在做一个项目，里面有一个功能是关于分享图的，就是把图片保存下来，然后可以分享给别人。在样式方面踩了好多的坑，至今没有从坑里起来。所以今天总结一下，希望今后再做类似的项目的时候能从坑里起来。。。

1、Wxml2Canvas不支持透明度。

色值不能用rgba的形式设置，因为在安卓机上绘图会出现掉色，出来的图片都是浅色的。所以一般使用hex的形式，hex值指的是十六进制数值。例如：color: #FFFFFF;

2、Wxml2Canvas不支持设置字体。

坑：在设置金额字体的时候，开发工具上金额字体跟金额图标是对齐了的，但是保存到相册里面后却对不齐了。

原因：Wxml2Canvas不支持设置字体，所以保存的图片金额字体是没有生效的，用了默认的字体，所以高度就不一样了，导致定位有偏差。

解决方法：可以采取写2个字符的方法。
一个用于对齐开发工具和手机页面所能看到的，不添加保存图片的那个固定类名（canvas）；
另一个在保存图片的时候使用，添加保存图片的那个固定类名（canvas），把他的样式设置成为opacity:0;因为Wxml2Canvas插件不支持透明度，所以完美的解决。亲测，对的非常齐。

3、Wxml2Canvas不支持设置border-radius。

所以，涉及到border-radius这个属性的都切成图

4、Wxml2Canvas不支持设置font-weight: 600。

我也不知道具体是为啥，反正设置font-weight: 600不生效，改成font-weight: bold就起作用了。

5、Wxml2Canvas不支持设置z-index。

z-index在画图里面是不生效的，要用data-delay这个元素控制。
data-delay的意思就是这个元素延迟多久来画，
它的值大的话层级就在上面，值小的话层级就在下面。