带划痕效果的刮图效果

带划痕效果的刮图效果

 

配置说明：brushworkSrc 用于图章效果的笔触。

核心代码说明： drawPoint 画了一个渐变的中心点（这样有模糊效果），然后一个循环调用 drawRandomLine 画随机划痕用的，大家可以改改里面的代码逐渐逼真。

 

=============对于uc9.6.2.404 在小米系统中会显示为半透明

怀疑是uc在小米上的bug是： 直接画图片的时候会半透明的bug，于是我就换成画颜色。 

 但画颜色会是全屏矩形的，为了得到元宝的形状，就又把反元宝的形状画进来，利用destination-out特性 于是就只留下元宝区被保留了。 比较繁琐。可以尝试下重渲染。

 

=============三星s4在webview里画不了，浏览器却可以：

可以在画完mask后强制让canvas重新渲染，如：在 drawPoint里加

this.mask.style["margin-right"]="1px"==this.mask.style["margin-right"]?"0px":"1px"