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. canvas.촉발된 동작

bindtouchstart는 손가락이 떨어지기 시작하는 첫 번째 위치이고, bindtouchmove는 손가락이 움직이는 위치입니다.

중요한 캔버스 속성 중 하나는 캔버스의 내용을 지우는clearRect입니다

clearRect( 위치의 X 좌표 삭제, 위치의 Y 좌표 삭제, 너비 삭제, 높이 삭제)

구체 코드는 다음과 같습니다.

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

구체 코드는https://github.com/zhaodengping/ 스크래치 미니

가서 해보세요 1등 당첨될 수도 있어요~~

추천 튜토리얼: "WeChat Mini Program"

위 내용은 WeChat 미니 프로그램에 스크래치 카드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!