What are the canvas synthesis effects?

Canvas synthesis effects include source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy, etc. Detailed introduction: 1. source-over, the default synthesis mode, the newly drawn image will be overlaid on the existing image; 2. source-in, etc.

this Tutorial operating environment: Windows system, Dell G3 computer.

Canvas is a drawing API in HTML5. It provides rich drawing functions, including graphic drawing, image processing and synthesis effects. In Canvas, the composition effect refers to superimposing multiple images together through different composition modes when drawing images, thereby producing different visual effects. The following will introduce some common Canvas synthesis effects.

1. source-over: This is the default composition mode, the newly drawn image will be overlaid on top of the existing image.

2. source-in: Only the overlapping parts of the newly drawn image and the existing image will be retained, and other parts will be made transparent.

3. source-out: Only the parts of the newly drawn image that do not overlap with the existing image will be retained, and other parts will be made transparent.

4. source-atop: The newly drawn image will be overlaid on top of the existing image, but only the part that overlaps the existing image will be retained, and the other parts will be made transparent.

5. destination-over: The newly drawn image will be located below the existing image.

6. destination-in: Only the parts of the existing image that overlap with the newly drawn image will be retained, and other parts will be made transparent.

7. destination-out: Only the parts of the existing image that do not overlap with the newly drawn image will be retained, and other parts will be made transparent.

8. destination-atop: The existing image will be located below the newly drawn image, but only the portion that overlaps the newly drawn image will be retained, and other parts will be made transparent.

9. lighter: The colors of the newly drawn image and the existing image will be added to produce a lighter color.

10. copy: The newly drawn image will completely replace the existing image.

11. xor: The color of the newly drawn image and the existing image will be XORed to produce special effects.

In addition to the above composition modes, Canvas also provides some global composition operations, which can be set through the globalCompositeOperation property. Common global synthesis operations include:

1. multiply: The newly drawn image is multiplied with the color of the existing image to produce a darker color.

2. screen: The newly drawn image is screen-mixed with the color of the existing image to produce a brighter color.

3. overlay: Adjust the color of the newly drawn image according to the brightness and contrast of the existing image.

4. darken: Compare the color of the newly drawn image with the color of the existing image, retaining the darker color.

5. lighten: Compare the color of the newly drawn image with the color of the existing image, and retain the lighter color.

By using these synthesis effects, we can achieve various interesting visual effects in Canvas, such as image blending, transparency effects, shadow effects, etc. In practical applications, we can choose the appropriate synthesis mode as needed to achieve the desired effect. At the same time, we can also create more complex and unique graphic effects by combining multiple images and composite effects.

The above is the detailed content of What are the canvas synthesis effects?. For more information, please follow other related articles on the PHP Chinese website!