Html5-canvas Example: Scratch Games

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.