小編給大家分享一下微信小程序中實現(xiàn)刮刮卡的示例,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

如何實現(xiàn)刮刮卡的效果呢?
思路是:
1、先將中獎的圖片或者文字位置和大小確定
2、開始畫canvas,將位置和大小跟之前中獎的文案的位置保持一致。
3、在canvas上覆蓋一層灰色的蒙層,作出刮刮卡未刮之前的效果
具體代碼如下
let left=0;
this.data.awardCanvas.moveTo(left,0)
this.data.awardCanvas.lineTo(left+400,0);
this.data.awardCanvas.lineTo(left+400,150);
this.data.awardCanvas.lineTo(left,150);
this.data.awardCanvas.stroke()
this.data.awardCanvas.setFillStyle('#ddd')
this.data.awardCanvas.fill()
this.data.awardCanvas.draw()4、開始做刮刮卡的動作,在canvas定義bindtouchstart和bindtouchmove兩個觸發(fā)的動作
bindtouchstart是開始落手指的第一個位置,bindtouchmove是手指移動的位置
其中重要一個canvas屬性是clearRect,清除畫布上的內(nèi)容
clearRect(清除位置的X坐標,清除位置的Y坐標,清除的寬度,清除的高度)
具體代碼如下:
this.data.awardCanvas.clearRect(x,y,15,15); this.data.awardCanvas.draw(true)
看完了這篇文章,相信你對“微信小程序中實現(xiàn)刮刮卡的示例”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)站題目:微信小程序中實現(xiàn)刮刮卡的示例-創(chuàng)新互聯(lián)
網(wǎng)站鏈接:http://www.jbt999.com/article10/cdeggo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、定制開發(fā)、搜索引擎優(yōu)化、標簽優(yōu)化、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容