HTML5 quick learning 2 Canvas and html5canvas

HTML5 quick learning 2 Canvas and html5canvas

This article introduces Canvas, one of the core functions of HTML5.

Canvas allows you to dynamically generate and display graphs, charts, images, and animations.

Canvas APIs have many functions. We will discuss the most common functions.

Create a canvas first.

We add a border to the canvas for easy viewing.

As you can see, canvas creates a rectangle. By default, the size is 300*150 pixels.

After adding a canvas to the page, we can use js to control her freely.

For example, you can add images, lines, and texts to draw images or even add advanced animations.

Note

Using canvas as a common label, you can apply CSS to change the style, and some CSS attributes can be inherited by elements in the canvas.

For example, to add text to a canvas, the style is the same as that of the canvas element by default.

Outline

• Key Points
• Theoretical Basis/preconditions
• Detailed steps
• Summary

Key Points

Master the important process of using the canvas API

Master common canvas APIs:For example, moveTo, lineTo, beginPath, closePath, stroke, and fill

Full understanding of examples

Theoretical Basis -- canvas coordinates

For example, the coordinates in the canvas start from the upper left corner, and the X axis is horizontally (by pixel) to the right, while the Y axis is vertically downward.

The point at the top left corner of the coordinate is (0, 0.

Detailed steps-use HTML5 canvas API to check browser support

We do two things

Browser support

If the IE mode is changed to IE7, the test is not supported:

 

Draw a diagonal line using canvas

Make some modifications to the above example

Draw a diagonal line in the canvas

Based on the above js code, we can summarizeImportant processes.

Note

There is a pitfall. I originally put the canvas length and width in the style. For example.

Cause:

The width and height of the canvas are the actual width and height of the canvas.

The width and height of the canvas style are the height and width of the canvas rendered in the browser.

Therefore, you must set the width outside.

Draw a diagonal line using transformation

Next, let's take a look at another way to draw an image on the canvas: transformation ).

Transformation is the best way to implement complex canvas operations (it looks more complicated to draw a diagonal line above)

UnderstandingTransform (transformation ):

Regard it as a modification layer between the instruction issued by the developer and the canvas display result)

Note:The correction layer always exists no matter whether a transformation is used during development.

The results of each painting operation must be corrected by the correction layer before they are displayed on the canvas.

Although this adds additional complexity, it adds more powerful features to the drawing system.

Note

Not calling the transform function in the Code does not mean that the canvas performance can be improved.

When the canvas is executed, the transform is implicitly called by the rendering engine, regardless of whether the developer calls the transform directly.

An important suggestion for reusable code:

Generally, the painting should start from the origin point, apply the transformation (scaling, translation, rotation, etc.), and then constantly modify the code until the desired effect is achieved.

Example

The result of this Code is exactly the same as above.

Note the differences between the two codes:

For the second method, translate (70,140) indicates moving the origin point to (70,140.

That is to say, all subsequent operations are performed relative to (70,140.

The first case is (70,140) à ),

The second case is (70,140) à (70,-70)

In the second case, (70,-70) is relative to the new origin point (70,140). The coordinates of the origin point at the beginning are (70 + 70,-70 + 140 ), it is easy to see that the results of these two cases are equivalent. Do you understand?

Let's take a look.

Let's summarize the above operations:

Painting tree

Now I want to learn more complex graphics.

The diagonal line drawn above is a simple path.

In fact, the path can be very complex: multiple lines, curve segments, and even sub-paths.

If you want to draw any shape on the canvas, you need to focus on the path API

According to the Convention, no matter what kind of image is to be drawn, the first one to be called is beginPath. For canvas, the biggest use of beginPath function is that canvas needs to calculate the internal and external ranges of the image accordingly, to complete subsequent stroke and fill.

The path tracks the current coordinates. The default value is the origin.

After beginPath is called, you can use various methods of context to draw the desired shape.

So far, several simple context path functions have been used.

MoveTo (x, y)

LineTo (x, y)

The difference between the above two functions is: moveTo is like lifting a paint brush and moving it to a new position;

LineTo tells canvas to use a paint brush to draw a straight line from the old coordinate on the paper to the new coordinate.

Note that no matter which one is called, the image is not actually drawn, because we have not yet called the stroke or fill function.

At present, we only define the path location for later use.

In addition, we will introduce a path function closePath, which is very similar to lineTo. The only difference is that the starting coordinate of the path is automatically taken as the target coordinate.

ClothPath also notifies the canvas that the currently drawn image is completely closed or has formed a fully closed area, which is useful for future filling and stroke.

In this case, you can create another sub-path in the existing path, or call beginPath to re-draw the new path at any time and completely clear all the previous paths.

1. Create a canopy

Function for creating a canopy

 

To intuitively show the trend of the graph line, I drew a sketch from the start point to the vertex, as shown below:

Function for tree painting on canvas:

The final result is as follows:

The following code adds the following code before stroke to beautify the canopy:

Turns to a thicker and smoother brown line.

Further beautifying, will close the path insideFill in green.

 

Note that the border on the right is also refined.

When we use the method of stroke first and then fill, half of the border will be filled.

If you do not want to fill the border, you must first fill the border and then draw the border, as shown below.

2. Use fillRect to draw the trunk (fill the rectangular area)

Let's first change the value of translate to give way to the position of the trunk.

Context. translate (130,150 );

Use fillRect (x, y, width, and height) to plot the trunk.

Note that this section must be in front of context. restore (); otherwise, the painting position will be wrong.

Final result:

Note

FillRect (x, y, width, height)

Summary

We can see the power of canvas, which can be drawn without third-party technology.

Of course, the painting is still relatively simple. In the next article, we will add other elements and special effects on the basis of this tree to complete a forest-lined track chart with rain animation effects.

Now, we will be here today. You are welcome to comment more to make the next article better :)