刮刮卡效果

2022-07-21 07:27:09 字數 637 閱讀 3525

利用兩個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的...