刮刮卡demo canvas實踐

2021-09-24 08:15:20 字數 1467 閱讀 4965

1、利用css將與層重疊；

"wrap">


複製**
複製**
在canvas畫布上繪製刮刮卡圖層影象；

var canvas = document.queryselector("canvas");


canvas.width = document.documentelement.clientwidth;


canvas.height = document.documentelement.clientheight;


if(canvas.getcontext)


function


draw


()複製**
3、在canvas畫布區域監聽滑鼠事件或觸控事件；

// 監聽滑鼠和touch事件


canvas.addeventlistener('mousedown', movestart, false);


canvas.addeventlistener('touchstart', movestart, false);


canvas.addeventlistener('mousemove', move, false);


canvas.addeventlistener('touchmove', move, false);


canvas.addeventlistener('mouseup', moveend, false);


canvas.addeventlistener('touchend', moveend, false);


複製**
4、在手指移動過程中，實時計算手指在畫布中的位置以及移動路徑，利用canvas的globalcompositeoperation方法中的destination-out效果將刮過的地方設定為透明從而實現刮卡的效果；

canvas.addeventlistener("touchstart",function(ev))


canvas.addeventlistener("touchmove",function(ev))


複製**
5、設定當canvas塗層被刮到一定百分比時去除整個塗層；

canvas.addeventlistener("touchend",function


() }


if(flag>=allpx/2)


}) 


複製**
6、全部刮開以後，刪canvas層

canvas.addeventlistener("transitionend",function


())複製**
完整**：



"wrap">


複製**

刮刮卡效果

import android.content.context import android.graphics.bitmap import android.graphics.bitmapfactory import android.graphics.canvas import android.grap...

刮刮卡效果

利用兩個canvas 疊加，從而實現刮刮卡效果。canvas id downcanvas canvas canvas id upcanvas canvas container page main article section upcanvas touchy.js是用於移動端觸控事件的封裝外掛程式。...

Android 刮刮卡原理

個人做個記錄，無意從研發變成了產品，現在回頭做做 練練生手。只看刮的原理，很簡單。需要知道的核心就1個 paint.setxfermode。基本原理 一共分兩層，如下圖，上面一層用於刮，下面一層用於顯示。演示 為偷懶的方式用兩個控制項層疊，實際應該使用自定義控制項繪製。刮獎層在觸控時，使用paint...