What is trigonometric function?

Trigonometric function is one of the basic elementary functions. It takes the angle (the most commonly used radian system in mathematics, the same below) as the independent variable. It can also be defined equivalently by the length of various line segments related to the unit circle.

In the application of HTML5 canvas, trigonometric function is generally used to calculate the unknown length edge and angle of triangle in canvas.

Common trigonometric functions include sine function, cosine function and tangent function. The javasript API provides math objects that contain these calculations.

//Returns the sine of a number.
Math.sin(x)

//Returns the cosine of a number.
Math.cos(x)

//Returns the tangent of a number.
Math.tan(x)

//Where parameter x is a value representing radians
//There are also some commonly used anti trigonometric functions

//Returns the arcsine of a number in radians.
Math.asin(x)

//Returns the arccosine of a number in radians.
Math.acos(x)

//Returns the arctangent of a number in radians.
Math.atan(x)

//Returns the value of the offset angle from the positive x axis to the line between the point (x, y) and the origin, which is a counterclockwise angle in radians.
Math.atan2(y, x) 

Basic principles of animation

Animation refers to a work that is played continuously by many frames of still pictures at a certain speed (such as 16 pictures per second), and the naked eye mistakenly thinks the picture is active due to the illusion of visual residual image. In order to get the active picture, there will be subtle changes between each picture. The most common way to make pictures is to draw them on paper or celluloid.

Once the graphics based on HTML5 canvas are drawn, it is still there. If we need to move it, we have to redraw all the figures (including the previous ones). That is to say, to achieve animation effect is to draw an image on the canvas, empty the canvas, then draw the image, and then empty... That is, to repeat the operation before the animation is finished playing!

HTML5 canvas provides Save and restore methods to draw complex graphics.

It can save the state of canvas, including the translation, zooming, rotation, miscutting, cropping and other operations of canvas, and can also restore to the last saved state.

Related methods:

//Save the status of the current environment
context.save()

//Return to previously saved path status and properties
context.restore()

The status of canvas is stored in memory. Its data structure is similar to stack, that is, it conforms to the basic characteristics of "first in, then out, then in, first out".

HTML5 canvas supports that we can directly manipulate the pixel data in canvas through the imagedata object, and directly read or write the data array into the object.

Imagedata object

The imagedata object stores the real pixel data of the canvas object, which contains the following read-only attributes:

width: picture width, in pixels
height: the height of the picture, in pixels
data ：A one-dimensional array of type Uint8ClampedArray , containing integer data in RGBA format, ranging from 0 to 255 (including 255)）。

data Property returns a Uint8ClampedArray that can be used as the initial pixel data for viewing. Each pixel is represented by four 1 bytes values (in the order of red, green, blue, and transparent values; this is the "RGBA" format). Each color value part is represented by 0 to 255. Each part is assigned to a continuous index within the array, and the red part of the upper left pixel is at index 0 of the array. Pixels are processed from left to right, and then down through the array.

Uint8ClampedArray Contain height × width × 4 bytes data，index value form 0 to (height×width×4)-1

In all the examples in the previous article, we sometimes draw one figure on top of another, which is not enough in more cases.

When the new drawing overlaps with the existing drawing, the drawing order and display effect will have different requirements for the synthesized drawing. Here, we can use the globalcompositeoperation property to change this situation.

Related properties:

//Sets or returns how a source (New) image is drawn to the target (existing) image.
context.globalCompositeOperation="source-in";

//Description of more values
//source-over: by default, the new image will overwrite the original image
//source-atop: displays the source image at the top of the target image. The part of the source image that is outside the target image is not visible.
//source-in: displays the source image in the target image. Only the source image part of the target image will be displayed, and the target image is transparent.
//source-out: displays the source image outside the target image. Only the external image part of the target image will be displayed, and the target image is transparent.
//destination-over: displays the destination image above the source image.
//destination-atop: displays the destination image at the top of the source image. Parts of the target image other than the source image are not displayed.
//destination-in: displays the destination image in the source image. Only the part of the target image in the source image will be displayed, and the source image is transparent.
//destination-out: displays the destination image outside the source image. Only the part of the target image outside the source image will be displayed, and the source image is transparent.
//darken: display the source image and the target image, and keep the darkest pixel in the overlapped part
//lighten: display the source image and target image, and keep the brightest pixels in the overlapped part
//lighter: display the source image and the target image, and add the color of the overlapping area
//copy: displays the source image. Ignore target image.
//xor: use exclusive or operation to combine source image and target image.