WeChatミニプログラムにスクラッチカードを実装

スクラッチ カードの効果を実現するにはどうすればよいですか?

アイデアは次のとおりです:

1. まず、勝った画像またはテキストの位置とサイズを決定します

2. キャンバスの描画を開始し、位置とサイズを一致させます前回の優勝コピー。場所は一貫したままです。

3. キャンバスをグレーのマスクで覆い、スクラッチ カードがスクラッチされる前にその効果を作成します

具体的なコードは次のとおりです

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スクラッチ カード アクションを作成するには、キャンバス上で 2 つのトリガー アクション、bindtouchstart と bindingtouchmove を定義します

bindtouchstart は指が落ち始める最初の位置、bindtouchmove は指が移動する位置です

重要なキャンバス属性の 1 つは、キャンバス上のコンテンツをクリアする clearRect です。

clearRect (位置の X 座標をクリアし、位置の Y 座標をクリアし、幅をクリアし、高さをクリアします)

具体的なコードは次のとおりです:

this.data.awardCanvas.clearRect(x,y,15,15);
this.data.awardCanvas.draw(true)

具体的なコードはhttps://github.com/zhaodengping/scratch-mini##にあります

#行って試してみてください、もしかしたら一等賞を獲得できるかもしれません~~

推奨チュートリアル: 「

WeChat ミニ プログラム 」

以上がWeChatミニプログラムにスクラッチカードを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。