Canvas shadow and graphic transformation sample code, canvas sample code

Canvas shadow and graphic transformation sample code, canvas sample code

This article describes the sample code of canvas shadow and graphic transformation. The details are as follows:

I. Shadow settings

1. shadow color: The value is the standard CSS color value. It is used to set the shadow color effect. The default value is full-transparent black.

context.shadowColor = color;

2. Shadow blur: You can set the Blur degree of the Shadow. The value is not correlated with the pixel. The default value is 0.

context.shadowBlur = 5;

3. Shadow offset:

ShadowOffsetX and shadowOffsetY are used to set the extension distance of shadow on the X and Y axes. A negative value indicates that the shadow will extend up or left, and a positive value indicates that the shadow will extend down or right. Both of them are 0 by default.

Context. shadowOffsetX = 10; // positive value: context to the right. shadowOffsetY = 10; // positive value: Down

4. Example of setting text shadow

<! DOCTYPE html> 

 
Ii. Graphic Transformation
We have also learned this knowledge before 2D transformations, but our canvas graphic transformations are different. The difference is that the transformations here do not transform graphs, but coordinate systems. Therefore, after a graph is transformed, the coordinate system is changed. If we plot the image directly, the problem will occur. Let's take a look at the specific situation.
1. to verify the above statement, let's look at an example.
<! DOCTYPE html> 
The following results show that the coordinate system is changed after the graphic transformation.

 
2. Rotate
<! DOCTYPE html> 
The effect is as follows:

 
This indicates that the image is rotated around the origin of the canvas coordinate system by default. When the image is rotated, the coordinate system also rotates.
3. Image Scaling
<! DOCTYPE html> 
The effect is as follows:

 
We can see that when we zoom in the width of the x-axis image, the x-axis of our coordinate system is also enlarged.
Then, after we transform the canvas image, how can we re-draw the image we want on the canvas without the hassle of restoring the changed coordinate system?
 
The canvas is saved and retrieved in a stateful manner.

For example, let's take the example we wrote above to demonstrate how to save the status and obtain the effect.
<! DOCTYPE html> 

As you can see, we saved the state of the coordinate system before scaling, that is, the State that was not changed at the beginning, and then we obtained the state after scaling the image, that is, to return to the State that has not been changed at the beginning, this is the storage and acquisition of the state, so that we can solve the effect of our graphic transformation on the coordinate system.
 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.