HTML5-canvas instance: Scratch game, html5-canvas scratch

HTML5-canvas instance: Scratch game, html5-canvas scratch

Implementation Method:

(1) using the canvas, fillRect () depicts a rectangle (not transparent), positioned on a tag such as a div (the tag contains the winning information)

(2) globalCompositeOperation = 'destination-out'; using this attribute, draw your finger across the canvas, arc (x, y, radius, 0, Math. PI * 2, true) to draw a circle, the circle will penetrate the previously depicted rectangle and see the content of the div label.

GlobalCompositeOperation attributes:　

The globalCompositeOperation attribute sets or returns how to draw a source (new) image to an existing image.

Source image = the drawing you plan to place on the canvas.

Target Image = the drawing you have placed on the canvas.

Value	Description
Source-over	Default value. Displays the source image on the target image.
Source-atop	The source image is displayed at the top of the target image. The source image is invisible outside the target image.
Source-in	Displays the source image in the target image. Only the source image in the target image is displayed, and the target image is transparent.
Source-out	Displays the source image outside the target image. Only the part of the source image outside the target image is displayed. The target image is transparent.
Destination-over	The target image is displayed above the source image.
Destination-atop	The target image is displayed at the top of the source image. The part of the target image outside the source image is not displayed.
Destination-in	Displays the target image in the source image. Only the target image in the source image is displayed, and the source image is transparent.
Destination-out	Displays the target image outside the source image. Only the target image outside the source image is displayed, and the source image is transparent.
Lighter	Displays the source image + target image.
Copy	Displays the source image. Ignore the target image.
Source-over	Use an exclusive or operation to combine the source image and the target image.

For example, blue indicates the target image (that is, the rectangle), and red indicates the source image (that is, the circle that the finger is crossed)

 

We can see that globalCompositeOperation = 'destination-out' is the property we want.

Complete sample code:

<! DOCTYPE html>