Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve Canvas globalCompositeOperation in html5". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

By default, if you draw an object (source) on top of another object (target) in Canvas, the browser will simply stack the image of the source object on top of the target object image.

To put it simply, in Canvas, different effects can be obtained through the globalCompositeOperation operation of the source image and the target image in Canvas.

Red apples and black circles turn into red apples that have been bitten through globalCompositeOperation's destination-out. In other words, through image synthesis in Canvas, we can achieve some unique effects, such as making a scratch card raffle effect. Today we will learn how to use image synthesis in Canvas.

Image synthesis globalCompositeOperation type

There are always 26 types of globalCompositeOperation attribute values in Canvas, each of which will have different effects in the previous life, of course you may see that the effects will be different, and even some effects will not render properly in the browser. But it doesn't matter, we simply understand the meaning and effect of these 26 types.

Ctx.save (); ctx.translate (w / 2, h / 2); ctx.fillStyle = 'red'; ctx.beginPath (); ctx.arc (- 40, 20, 80, 0, Math.PI * 2, true); ctx.closePath (); ctx.fill ()

The above code will draw a red circle with a radius of 80px on the Canvas canvas, which is called the image source here.

Ctx.fillStyle = 'orange'; ctx.beginPath (); ctx.arc (40, 20, 80, 0, Math.PI * 2, true); ctx.closePath (); ctx.fill (); ctx.restore ()

This code will draw an orange circle with a radius of 80px on the Canvas canvas, which is called the image target here. You can complete the image synthesis operation by setting the value of globalCompositeOperation between the image source and the target image:

Ctx.save (); ctx.translate (w / 2, h / 2); ctx.fillStyle = 'red'; ctx.beginPath (); ctx.arc (- 40, 20, 80, 0, Math.PI * 2, true); ctx.closePath (); ctx.fill (); ctx.globalCompositeOperation =' source-in'; ctx.fillStyle = 'orange'; ctx.beginPath (); ctx.arc (40, 20, 80, 0, Math.PI * 2, true); ctx.closePath (); ctx.fill (); ctx.restore ()

The results are as follows:

Source-over

Source-over is the default value for the globalCompositeOperation property. The source drawing covers the target drawing, where the source drawing is opaque, the source drawing is displayed, and the rest shows the target drawing

Source-in

Source-in: only the opaque part of the target drawing and the source drawing is drawn.

Source-out

Source-out: parts of the target drawing that do not overlap with the source drawing will be drawn

Source-atop

Source-atop: the target graph that overlaps the content of the target drawing and the source drawing will be drawn

Destination-over

Destination-over: the target graphics behind the target graphics and the source graphics content will be drawn

Destination-in

Destination-in: the overlap between the target drawing and the source drawing is retained (the source drawing), and the rest is displayed as transparent

The rest will not be shown one by one. For a specific description of each value, you can click here.

Control image synthesis operation with globalAlpha

There are two properties in Canvas, globalAlpha and globalCompositeOperation, to control the image compositing operation:

GlobalAlpha: sets the transparency of the image. The default value of the globalAlpha property is 1, which indicates that it is completely opaque and can be set from 0 (fully transparent) to 1 (completely opaque). This value must be set before drawing.

GlobalCompositeOperation: the value of this property controls drawing in the current Canvas bitmap after globalAlpha and all transformations take effect

Application example of synthetic Ima

In the usual business, we can often see the raffle effect of scratching cards. If we use Canvas to do this, we will use the composition of Canvas images.

We present the prize (if it is an image) as the background of the div#card. Then draw a gray rectangle in Canvas (source image), and then dynamically draw a new image through a mouse event (or touch event) (this is similar to a brush) and set the value of the globalCompositeOperation property to destination-out (the newly drawn image and the non-overlapping parts of the existing graphics content in the target canvas will be retained). When the brush erase is greater than a certain proportion, delete the element or use clearRect () to clear the Canvas canvas. To show the div background.

This is the end of "how to implement Canvas globalCompositeOperation in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.