Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the tag of HTML5". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope this article "how to use the tag of HTML5" can help you solve the problem.

Label

Using the canvas element in a web page is as simple as using other HTML tags, and then use the JavaScript script to call the drawing API to draw a variety of graphics. Canvas has a variety of ways to draw paths, rectangles, circles, characters, and add graphics.

Use label to draw basic flow

1. Get the canvas object

2. create a two-dimensional drawing context object

3. Draw text on canvas

Link:

Draw basic graphics

Draw a line:

The moveTo () method is used to create a new subpath and set its starting point. The lineTo () method sets the end point of the straight path, while the stroke () method is used to draw a straight line along that path, such as:

Draw a rectangle

Drawing API provides two special methods for drawing rectangles: strokeRect () and fillRect (), which can be used to draw rectangular borders and fill rectangular areas, respectively. Before drawing, you often need to set the style before you can draw. Among them, strokeStyle can set the rectangle border color, fillStyle can set the fill color, and lineWidth can set the border width.

Link:

Draw a circle

In canvas, all basic graphics are path-based, and some paths are usually set by calling methods such as linTo (), rect (), and arc (). When you finally use the fill () or stroke () methods to draw a border or fill an area, you refer to this path. Drawing using a path is basically divided into the following three steps:

1. Create a drawing path. The beginPath () and closePath () methods are commonly used, and each call to the beginPath () method produces a new subpath.

2. Set the drawing style. Use the strokeStyle property to set the border color, the lineWidth property to set the border width, and the fllStyle property to set the fill color.

3. Draw graphics. The stroke () method draws the border; the fill () method draws the filled region.

Link:

Draw triangles

Drawing triangles also needs to be achieved by drawing paths, and the basic steps are similar to drawing circles, such as:

The closePath () method is habitually placed in the last step of the path setting, not as the end of the path setting, because after that, you can continue to set the path.

Link:

Graphic combination

In a canvas drawing, you can use the globalCompositeOperation property to set how colors are combined when two graphics are superimposed, as follows:

The parameter value has 12 legal values, which determines the type of 12 graphic combinations, and the default value is source-over. The 12 types of combinations are as follows:

1. Copy: only draw new graphics and delete everything else.

2. Darker: where the graphics overlap, the color is determined by the subtraction of two color values.

3. Destination-atop: the existing content is retained only where it overlaps with the new graphics, and the new graphics are drawn after the content.

4. Destination-in: where the new graphics and existing canvases overlap, the existing content is retained and all other content becomes transparent.

5. Destination-out: where the existing content does not overlap with the new graphics, the existing content is retained and all other content becomes transparent.

6. Destination-over: the new graphics are drawn after the existing content.

7. Lighter: where the graphics overlap, the color is determined by the addition of the two color values.

8. Source-atop: new graphics are drawn only where the new graphics and existing content overlap.

9. Source-in: new graphics are drawn only where the new graphics and existing content overlap, and all other content becomes transparent.

10. Source-out: new graphics are drawn only where they do not overlap with existing ones.

11. Source-over: new graphics are drawn on top of existing graphics, which is the default behavior.

12. Xor: graphics become transparent where they overlap and where they are normally drawn.

The function RectArc (context) is used to draw composite graphics, using the method translate () to move to a different location.

Link:

Draw a curve

In canvas, drawing API provides a variety of curve drawing methods, the main curve drawing methods are arc (), arcTo (), quardraticCurveTo () and bezierCureveTo ().

Use the arc () method, such as:

If you close the path with closePath () when you draw an arc, a semicircle is generated.

Link:

Use the arcTo () method:

The arcTo () method draws an arc using the tangent method, adding an arc to the current subpath using two target points and a radius. Compared with the arc () method, it is also to draw the arc, and the drawing idea and emphasis are different.

Link:

Use the quadraticCurveTo () method:

Quadratic spline curve is a kind of curve, canvas drawing API specially provides the method of drawing this curve. The quadraticCurveTo () method adds a quadratic spline to the current subpath.

Link:

Use the bezierCurveTo () method:

Bezier curve is a mathematical curve used in two-dimensional graphics applications. Compared with quadratic splines, Bezier curves use two control points, so you can create more complex curve graphs.

Link:

Draw text

With labels, you can draw text using fills or strokes, and you can set the font style and alignment of the text before drawing the text. There are two ways to draw text, namely the fill drawing method fillText () and the stroke drawing method strokeText (), such as:

In some cases, developers need to know the width of the text being drawn to facilitate layout. Drawing API supports the method of getting the width of the drawn text, and the measureText () method is used to get the width of the text.

Link:

Create object shadows:

Link:

Draw a linear gradient:

Using a gradient requires three steps: the first is to create a gradient object; the second is to set the gradient color and transition; and finally, to assign the gradient object to a fill or stroke style.

Linear gradient refers to the linear interpolation color value between the start point and the end point. Setting the gradient color requires using the addColorStop () method on the gradient object and adding a color change at some point in the gradient. Such as:

Link:

Draw a radial gradient:

A radial gradient is a radioactive color transition between the circumference of two specified circles. Such as:

Link:

Draw the image:

Using the drawImage () method, you can add graphics to the canvas canvas, that is, draw an image in three ways.

1. Copy the entire image into the canvas, place it in the specified upper-left coordinate position, and map each image pixel to a unit of the canvas coordinate system, such as:

2. Copy the entire image to the canvas, but allow you to specify the desired image width and height in canvas units, such as:

3. the use is complex, not to mention for the time being.

Trim the drawing:

Two drawing methods are used in path drawing, the stroke () method for drawing lines and the fill () method for filling areas. With regard to path processing, there is another method called clipping method clip ().

The trimmed area is determined by the path, just like the way to draw lines and fill the area, you also need to determine the drawing path in advance, and then execute the trimmed region path method clip (), so that the trimmed area is determined, such as:

This is the end of the content about "how to use the HTML5 tag". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.