How is HTML5 Canvas graphics composition implemented? Attached code

The content of this article is about how the HTML5 Canvas graphics combination is implemented? The code is attached, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When drawing complex graphics in canvas, graphics often intersect. Canvas calls the crossover of graphics a combination.

Set the graphics combination method through the globalCompositeOperation attribute of the context object. The value of this attribute and its meaning are shown in Table 4-5. Among them, source refers to the newly drawn graphic, and destination refers to the original graphic. The default value is source-over.

Table 4‑5 globalCompositeOperation attribute values ​​and meanings

Operation	Meaning
source-atop (S atop D)	Display the source image where both images are opaque. Displays the destination image where the destination image is opaque but the source image is transparent. Displayed transparently elsewhere.
source-in (S in D)	Displays the source image where both the source and destination images are transparent. Displayed transparently elsewhere.
source-out (S out D)	Displays the source image where the source image is non-transparent and the destination image is transparent. Displayed transparently elsewhere.
source-over (S over D, default)	Display the source image where the source image is non-transparent. Display target image elsewhere.
destination-atop (S atop D)	Displays the destination image where both the source and destination images are non-transparent. Displays the source image where the source image is non-transparent and the destination image is transparent. Displayed transparently elsewhere.
destination-in (S in D)	Displays the destination image where both the source and destination images are non-transparent. Displayed transparently elsewhere.
destination -out (S out D)	Displays the destination image where the destination image is opaque and the source image is transparent. Displayed transparently elsewhere.
destination -over (S over D)	Displays the target image where the target image is non-transparent. Display target image elsewhere.
lighter (S plus D)	Displays the sum of the source image and the destination image.
xor (S xor D)	The source image and the target image are XORed.
copy (D is ignored)	Display the source image and not the target image.

The following figure shows the effect of the source graphic and the target graphic under different values ​​of the globalCompositeOperation attribute. Among them, the red circle represents the source graphic (S), and the blue rectangle represents the target graphic (D).

The above picture is the effect in Google Chrome browser version 41.0.2272.118. However, handling combination operations is still very tricky because the five major browsers, such as Chrome, Firefox, Safari, Opera, and IE9, handle combinations differently. If you want to use graphics composition, you should check each browser's current support.

Since the globalCompositeOperation property is global, you should pay attention to saving and restoring the state when using it.

The above is how to implement HTML5 Canvas graphics combination? Attached is a full introduction to the code. If you want to know more about Html5 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How is HTML5 Canvas graphics composition implemented? Attached code. For more information, please follow other related articles on the PHP Chinese website!