Canvas globalCompositeOperation

By default, if an object (source) is drawn on top of another object (target) in Canvas, the browser will simply overlay the image of the source object on top of the image of the target object.

To put it simply, in Canvas, by combining the image source and target image through globalCompositeOperation operation in Canvas, you can get different effects, such as the following figure:

As shown in the picture above, the red apple and black circle turn into a bitten red apple through destination-out of globalCompositeOperation . In other words, through image synthesis in Canvas, we can achieve some unique effects, such as we want to create a scratch card lottery effect. Today we will learn how to use image synthesis in Canvas.

There are a total of 26 types of values ​​for the globalCompositeOperation attribute in Canvas. Each type will produce different effects. Of course, you may see that the effects will be different, and some effects may not be rendered normally in the browser. But it doesn’t matter, let’s simply understand the meanings and effects 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. By setting the value of globalCompositeOperation between the image source and the target image, the image synthesis operation can be completed:

 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 effect obtained at this time is as follows:

source-over is the default value of the globalCompositeOperation property. The source graphic covers the target graphic. The source graphic is displayed in the opaque parts of the source graphic, and the target graphic is displayed in the rest.

source-in : Only the parts of the target graphic and the source graphic that overlap and are opaque are drawn.

source-out : The non-overlapping portion of the target graphic and the source graphic will be drawn.

source-atop : The target graphics in the overlapping portion of the content of the target graphics and the source graphics will be drawn.

destination-over : The destination graphics behind the destination graphics and source graphics content will be drawn.

destination-in : The overlapping portion of the destination graphic and the source graphic will be retained (source graphic), and the rest will be displayed transparently

The others will not be shown one by one. The specific description corresponding to each value can be found here.

There are two properties globalAlpha and globalCompositeOperation in Canvas to control image synthesis operations:

• globalAlpha : Set the transparency of the image. The globalAlpha property defaults to 1 , indicating full opacity, and can be set from 0 (fully transparent) to 1 (fully opaque). This value must be set before the graph is drawn
• globalCompositeOperation : The value of this attribute controls the drawing of graphics in the current Canvas bitmap after globalAlpha and all transformations have taken effect.

In our daily business, we often see lottery effects such as scratch cards. If we use Canvas to do it, we will use the synthesis of Canvas images.

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

We display the prize (if it is an image) as the background of div#card . Then first draw a gray rectangle (source image) in Canvas, then dynamically draw a new image through mouse events (or touch events) (this is similar to a brush), and set the value of globalCompositeOperation attribute to destination-out (new draw The non-overlapping parts of the graphics and the graphics content that already exist in the target canvas will be retained). When the brush erase is greater than a certain proportion, delete the <canvas> element or use clearRect() to clear the Canvas canvas. to show the div background

In this article, we mainly introduce the image synthesis of Canvas. In Canvas, the image synthesis operation can be controlled through two attributes, globalAlpha and globalCompositeOperation, to achieve the image synthesis effect. I hope it will be helpful to everyone’s learning, and I also hope everyone will support VeVb Wulin Network.