ホームページ > WeChat アプレット > ミニプログラム開発 > WeChatミニプログラムにスクラッチカードを実装

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

Guanhui
リリース: 2020-05-23 11:55:20
転載
5483 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.im
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート