Canvas advanced functions (medium)

canvas Advanced features （ in ）

In this paper , You will learn Canvas Some of the more advanced features . This article will show you how to synthesize 、 Create shadows to make the graphics look more realistic and interesting . This article is very exciting , I hope these contents can broaden your horizon , Help you learn the advanced functions of canvas .

1. synthesis

canvas Advanced features （ in ） It does include a lot of content , Congratulations on having learned this knowledge . In this section , We will learn some easy things —— synthesis , They are not complicated , And it's fun . In short , Composition is to combine multiple visual elements into one visual element .
Everything you paint on the canvas is composited , This means that everything drawn will be merged with the existing elements that have been drawn . This is actually a basic synthesis , Just superimpose some content on others . I am going to introduce the synthesis of these aspects , But now let's take a look at the simplest compositing method in the canvas , namely globalAlpha attribute .

Be careful ： The two global compositing attributes described in this section affect 2D Render the drawing effect of the context . Make it clear , That is, modifying the global composition attribute will affect all the contents drawn after modification .

1.1 Global alpha value

Before drawing on the canvas , It will apply a and globalAlpha The alpha value that the attribute matches . Assign to globalAlpha The value of must be at 0.0（ Completely transparent ) And 1.0（ Opaque ） Between , The default value is 1.0. In short ,globalAlpha Attributes affect the transparency of the object to be painted . for example , You can draw a translucent square as follows ：

context.fillStyle = "rgb(63, 169, 245)";
context.fillRect(50, 50, 100, 100);
context.globalAlpha = 0.5;
context.fillStyle = "rgb(255, 123, 172)";
context.fillRect(100, 100, 100, 100);

Because we only set it after drawing the blue square globalAlpha Attribute , So only pink squares are affected by alpha values . The result is that a small piece of the blue square in the back is slightly displayed through the pink square in the front .

Now? , By giving fillStyle Set a containing less than 1 Alpha value of rgba value , You can get the same effect . Here's the difference ,globalAlpha The global alpha value is set , This value will be applied later rgba Color value and other alpha values are referenced . for example , If globalAlpha by 0.5, You applied it again fillstyle( It has an alpha value of 0.5 Of rgba), So the alpha value of the result is actually 0.25.2D Global alpha value of the rendering context (0.5) Acts as the base for calculating other alpha values (0.5*0.5=0.25).

1.2 Synthesis operation

As described at the beginning of this section , Even if it's brand new 2D The dyadic context also uses synthesis from the beginning . You may not have noticed this , Because the synthesis method used at this time can get the desired results ： One figure superimposed on another . This composition is called source over target , The source is a new drawing , The target is something that may have been mapped 2D Rendering context . We know , This is because 2D Rendering context globalCompositeOperation The default value of the property is source-over, And this attribute defines the pair 2D The type of composition performed by all painted shapes on the rendering context （11 One of the two options ). It must be noted that , Depending on the order of assignment globalCompositeOperation All the values of may relate to one of the source or target （ It depends on the order ）, Not both . for example ,source-over yes （ The source overrides the target ） For short , The goal is implicit , Because it doesn't need to specify... In the value （ The source must be drawn on something ）.

Let's get to know globalCompositeOperation Supported by 11 A choice . Use the following code as a template , You can learn every synthesis operation . The blue square is the target , And the pink square is the source . The reason we only use blue and pink instead of other colors is that they can better show the effect of the compositing operation ：

context.fillStyle = "rgb(63, 169, 245)";
context.fillRect(50, 50, 100, 100);
context.globalCompositeoperation = "source-over";
context.fillStyle = "rgb(255,123,172)";
context.fillRect(100, 100, 100, 100);

Be careful ： Some browsers don't support all globalCompositeOperation value .

1. source-over

This is the default , It represents the drawing （ Source ） Will be drawn on the existing canvas （ The goal is ） above ：

context.globalCompositeOperation = "source-over";

The effect is exactly the same as the drawing effect learned so far .

2. destination-over

The value of this operation is the opposite of the previous value , So now the target is drawn on top of the source ：

context.globalCompositeOperation = "destination-over";

The effect is just the opposite of the previous operation .

3. source-atop

This operation will draw the source on top of the target , But both are opaque in the overlapping area . Targets drawn in other locations are opaque , But the source is transparent .

4. destination-atop

This operation is related to source-atop contrary , The target is drawn on top of the source , Where both are opaque in the overlapping area , But sources drawn elsewhere are opaque , And the goal becomes transparent .

5. source-in

Draw only the source in the area where the source and target overlap . And the non overlapping parts become transparent .

6. destination-in

This operation is related to source-in contrary , Keep the target in the area where the source and target overlap . And the non overlapping parts become transparent .

7. source-out

Draw the source on an area that does not overlap the target . Other parts become transparent .

8. destination-out

Keep the target on an area that does not overlap the source . Other parts become transparent .

9. lighter

This value is independent of order , If the source and target overlap , Add the color values of the two . The maximum value of the obtained color value is 255, The result is white .

10. copy

This value is independent of order , Draw only the source , Cover the target .

11. xor（ Exclusive or ）

This value is independent of order , Only non overlapping source and target areas are drawn . All overlaps become transparent .

All in all , These compositing operations enable you to achieve some interesting effects when you need to draw some complex graphics . There are some operations （ Such as destination-out ） It is useful when erasing some non rectangular areas on the canvas ： for example , Use a circle as the source .

2. shadow

Everyone likes nice shadow effects , They could be Adobe Photoshop The most widely used effect in , And often in Web And graphic design . If the operation is correct , They actually increase the realism of the image . However , If the operation is improper , They can also completely destroy an image .

Creating shadow effects on the canvas is relatively simple , It can go through 4 Global attributes to control . These properties are shadowBlur、shadowOffsetX、shadowOffsetY and shadowColor. We will begin to explain these attributes one by one . By default ,2D Rendering context will not draw shadow effect , because shadowBlur、shadowOffsetX and shadowOffsetY Set to 0, and shadowColor Is set to transparent black . The only way to create a shadow effect is to shadowColor Change to opaque value , At the same time shadowBlur、shadowOffsetX or shadowOffsetY Are set to non 0 value ：

context.shadowBlur = 20;
context.shadowColor = "rgb(0 ,0, 0)";
context.fillRect(50, 50, 100, 100);

In this case , Set... For shadows 20 Blur value of pixel , And set its color to completely opaque black . The offset value of the shadow is x Axis and y The axis direction remains the default value 0. It is important to note that , Even with opaque black , But because of the fuzzy effect , This shadow still has some transparency on the border .

modify shadowBlur、shadowOffsetX or shadowOffsetY attribute , You can create different shadow effects ：

context.shadowBlur = 0;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(100, 100, 100, 0.5)"; //  Transparent grey 
context.fillRect(200, 50, 100, 100);

Change the blur to 0, Create a clear shadow effect , And slightly to the right , You get a different shadow effect . Use the... Mentioned in the previous section rgba Color values will shadowColor Set to transparent light gray , To achieve a more dazzling effect .

Canvas shadows support all graphics , So you can create a shadow effect on the circle or other shapes you draw . You can even change the color to any fancy value ：

context.shadowColor = "rgb(255,0,0)"; //  Red 
context.shadowBlur = 50;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.beginPath();
context.arc(400, 100, 50, 0, Math.PI * 2, false);
context.closePath();
context.fill();

This code will get a circle , It has a bright red shadow effect behind it .

By combining various blur and color values , We can achieve some effects that are completely independent of shadows . for example , Use a blurred yellow shadow to create a lighting effect around an object , Such as the sun or a luminous body .