Scratch card implementation

How do you achieve the scratch-card effect?

Idea is:

  1. The position and size of the winning picture or text will be determined first

  2. Start drawing the canvas, matching the position and size of the previous winning copy.

  3. Cover the canvas with a gray mask to create the same effect as before the scratch card was scraped

    The specific code is as follows

    let left=0; This. Data. AwardCanvas. MoveTo (left, 0) this. Data. AwardCanvas. The lineTo (left + 400, 0); This. Data. AwardCanvas. LineTo (left + 400150); this.data.awardCanvas.lineTo(left,150); this.data.awardCanvas.stroke() this.data.awardCanvas.setFillStyle('#ddd') this.data.awardCanvas.fill() this.data.awardCanvas.draw()Copy the code

  4. Start with the scratch action and define bindTouchStart and BindTouchMove on the canvas

Bindtouchstart is the first place where you start to drop your finger, and bindTouchmove is where you move your finger

One of the most important Canvas properties is clearRect, which clears the contents of the canvas

ClearRect (X coordinate of clear position, Y coordinate of clear position, width of clear, height of clear)

The specific code is as follows:

This. Data. AwardCanvas. ClearRect (x, y, 15, 15); this.data.awardCanvas.draw(true)Copy the code

Specific code at https://github.com/zhaodengping/scratch-mini

Go and try it, maybe you can get the first prize