Html5-canvas Example: Scratch Games

Implementation method:

(1) using the canvas canvas, FillRect () depicts a rectangle (not transparent), positioning the lid on a tag such as a div (this tag says the winning information)

(2) globalcompositeoperation = ' destination-out '; With this property, the finger is drawn across the canvas, arc (x, y, radius, 0, math.pi*2, true) draw the circle, Then this circle will penetrate the rectangle that was previously depicted and see the contents of the DIV tag

Globalcompositeoperation Properties:　

The Globalcompositeoperation property sets or returns how a source (new) image is drawn to the target (existing) image.

SOURCE image = The drawing you intend to place on the canvas.

Target image = The drawing you have placed on the canvas.

value	description
source-over	default. Displays the source image on the target image.
source-atop	Displays the source image at the top of the target image. The portion of the source image that is outside the target image is not visible.
source-in	Displays the source image in the target image. Only the portion of the source image within the target image is displayed, and the target image is transparent.
source-out	Displays the source image outside of the target image. Only the source image portion outside the target image is displayed, and the target image is transparent.
destination-over	Displays the target image above the source image.
destination-atop	Displays the target image at the top of the source image. The part of the target image that is outside the source image is not displayed.
destination-in	Displays the target image in the source image. Only the portion of the target image within the source image is displayed, and the source image is transparent.
destination-out	to display the target image outside of the source image. Only the part of the target image that is outside the source image is displayed, and the source image is transparent.
lighter	Displays the source image + target image.
copy	displays the source image. ignores the target image.
source-over	combines the source image with the target image using an XOR operation.

For example, Blue is the target image (that is, the rectangle), and red is the source image (that is, the circle with the finger)

As you can see, globalcompositeoperation = ' destination-out ' is the attribute we want

<! DOCTYPE html>
　　
Html5-canvas Example: Scratch Games