利用兩個canvas 疊加,從而實現刮刮卡效果。
<canvas
id="downcanvas"
>
canvas
>
<
canvas
id="upcanvas"
>
canvas
>
.container-page .main .article section #upcanvas
touchy.js是用於移動端觸控事件的封裝外掛程式。(
this.canvas.up.o.bind('touchy-drag', othis.handletouchydrag);
handletouchydrag : function(event, phase, $target, data)
},fnfill : function(x , y),
其中ctxup.globalcompositeoperation = "destination-out";是關鍵**。在源影象外顯示目標影象。只有源影象外的目標影象部分會被顯示,源影象是透明的。
效果請檢視:
源**:
刮刮卡效果
import android.content.context import android.graphics.bitmap import android.graphics.bitmapfactory import android.graphics.canvas import android.grap...
qt qml 刮刮卡效果
用canvas mousearea實現的刮刮卡效果。表層是一層色彩,用手指劃開,可看到下面的文字 lisence mit,請保留本文件說明 author surfsky.cnblogs.com 2015 02 先看效果 核心 1 canvas 18else23 2425 清除圓形區域 26funct...
canvas實現刮刮卡效果
目前在html5和css3的熱潮下,html頁面的效果也是層出不窮,下面我們來介紹使用canvas來模仿刮獎刮開效果。原理在需要刮出的或者文字上方蓋上一層灰色或者其他背景的canvas畫布,當手指或者滑鼠點選畫布並移動時,將畫布上移動過的軌跡變成透明即可。分析demo中在class為content的...