在上有一个小练习是要实现小程序上的微信wxid二维码生成器生成器，想想基于jquery的微信wxid二维码生成器生成插件有很多但是小程序是不允许操作dom的，所以自己找了一个纯javascript版嘚微信wxid二维码生成器生成源码然后换汤不换药把其中的hmtl5中的canvas改为小程序的canvas；

1、解读源码，修改绘制canvas部分源代码如下

 
 

 2、然后愉快的将代碼修改如下：
 
 

 
 

 3、哈哈，愉快的运行起来~~~~~~报错！！
 
 

 
 

 赶紧看看小程序的api发现小程序是没有fillRect()方法的，只有rect()方法,所以啪~啪~啪改为如下：
 
 

 

 运行懵逼了，怎么没有微信wxid二维码生成器呢我的微信wxid二维码生成器呢？好吧接着分析rect语fillRect的区别其实rect方法只是绘制出轮廓，并不会对路径进行填充所以紧接其后要对其fill填充。
 
 

 
 

 运行~~~噢啦终于出现期待已久的微信wxid二维码生成器喽！！
 
 

 好了，总算完成了但是怎么生成微信wxid二维码苼成器的时候感觉有点慢呢，于是借用同事的手机（安卓系统）试了一下输入网址，点击生成~~
 
 

 崩了微信直接挂了好吧接着找原因，感覺影响速度的只能是for循环那块代码于是把ctx.fill()拿到for最外层；
 
 

 

 运行~~这速度，飞快！自己的小7也不卡了又用同事的试了一把，没问题原来对繪制路径填充只需要最后填充就Ok了，我还二逼的对每次绘制进行了填充