HTML5 canvas globalCompositeOperation graphic type description, html5canvas

Source: Internet
Author: User

HTML5 canvas globalCompositeOperation graphic type description, html5canvas

We always draw one image on the other. In most cases, this is not enough. For example, it is subject to the drawing sequence. However, we can useglobalCompositeOperationAttribute to change these practices.
globalCompositeOperation = type
We can not only draw new images behind existing images, but also cover and clear (comparedclearRectMethod is much stronger) in some regions.

typeIs one of the following 12 string values:

Note: In all the examples below, the Blue Circle is drawn first, that is, "existing canvas content", and the red circle is drawn later, that is, "New Image ".

Source-over(Default)

This is the default setting, and the new image will overwrite the original content.

Destination-over

The new image will be drawn under the original content.

Source-in

The new image only overlaps with the original content. Other regions are transparent.

Destination-in

The overlapping parts of the original content and the new image will be retained, and other areas will become transparent.

Source-out

The result is that only the parts in the new image that do not overlap with the original content will be drawn.

Destination-out

Parts of the original content that do not overlap with the new image will be retained.

Source-atop

The overlapping parts of the new image and the original content will be drawn and overwrite the original content.

Destination-atop

The overlapping parts of the original content and the new content will be retained, and a new image will be drawn under the original content.

Lighter

The overlapping parts of the two images are colored.

Darker

The overlapping parts of the two images are used for color reduction.

Xor

The overlapping parts become transparent.

Copy

Only new images are retained, and others are cleared.

Note:copyAnddarkerThe property value is temporarily invalid in Gecko 1.8 browser (Firefox 1.5 betas, and so on.

Related Article

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.