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

This article mainly explains "how to use canvas in html5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use canvas in html5.

Some of the Canvas drawing environment belongs to the immediate drawing method, and some drawing methods are based on the path.

The immediate drawing method has only two strokeRect (), fillRect (), and although the strokezText () and fillText () methods are also drawn immediately, text is not a graph.

Path-based rendering system

Most rendering systems, such as SVG (Scalable Verctor Graphics, scalable vector graphics), Adobe Illustrator, etc., are path-based

When using these drawing systems, you need to define a path and then stroke or fill it, or you can stroke and fill it so that the graph can be displayed.

There are three drawing methods in Canvas:

Draw a segment

In the Canvas drawing environment, line segments are also drawn based on the path, which is called linear path. The methods of creating linear path: moveTO () and lineTo (). After creating the path, call the stroke () method to draw the line segment in Canvas.

This is the path-based drawing method we mentioned earlier, and it must be stroked or filled.

Usually two points connect a line, so it is very easy to draw a line segment, specify the starting point of the line through moveTO (), and move to another point through lineTo ().

Function drawLine () {cxt.moveTo (50,50); cxt.lineTo (100,100);}

However, we can't see the line segments in the canvas. As we mentioned earlier, the path-based rendering method must be stroked or filled. So to see the results, we must also use the stroke () method.

So we changed the method to the following so that a line segment would be drawn.

Function drawLine () {cxt.moveTo (50,50); cxt.lineTo (200,200); cxt.stroke ();}

We can also draw line segments in the canvas with only lineTo (). We change the above code to look like the following, and the effect is the same.

Function drawLine () {cxt.lineTo (50,50); cxt.lineTo (200,200); cxt.stroke ();}

Summarize the usage of moveTo () and lineTo ()

MoveTo (XQuery y): moves the stroke to the specified coordinates x and y, adding a subpath to the current path. This method does not clear any subpaths in the current path.

LineTo (xQuery y): draws a straight line from the current position to the specified x and y positions, and if there are no subpaths in the current path, this method behaves like moveTo (). If there is a subpath in the current path, this method adds the point you specified to the subpath.

Change the style of a line segment

Change the width of the segment

Function= 14; cxt.lineTo (50,50); cxt.lineTo (200,200); cxt.stroke ();}

Change the color of the segment

Function drawLine () {cxt.lineWidth = 14; cxt.strokeStyle = 'green'; cxt.lineTo (50,50); cxt.lineTo (200,200); cxt.stroke ();}

We can also use CanvasGradient objects or CanvasPattern objects to add gradient colors or patterns to line segments

Function drawLine () {cxt.lineWidth = 14; var gradient = cxt.createLinearGradient (0,0, canvas.width/2, canvas.height/2); gradient.addColorStop (0, 'blue'); gradient.addColorStop (0.5,' purple'); gradient.addColorStop (1, 'yellow'); cxt.strokeStyle = gradient; cxt.lineTo (50,50); cxt.lineTo (200,200); cxt.stroke ();}

BeginPath () and closePath ()

From the three drawing methods in canvas above, we can see that the arc path of the second line is an open path, and the arc of the last line is a closed path. So how is a closed path achieved?

Let's take a look at two important methods of path drawing in canvas.

BeginPath (): clears all current subpaths to reset the current path and replan a path.

ClosePath (): used to close an open path. Not required, if the graph is already closed, that is, the current point is the starting point, the function does nothing.

Draw a broken line first

Function drawLine () {cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.moveTo (50,50); cxt.lineTo (50,150); cxt.lineTo (150,150); cxt.stroke ();}

Modify the code in the above example to add beginPath () and closePath () methods to the code:

Function drawLine () {/ / Stroke triangle cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath (); cxt.moveTo (50,50); cxt.lineTo (50,150); cxt.stroke (); cxt.beginPath (); cxt.lineTo (150,150); cxt.lineTo (150,250); cxt.stroke (); cxt.closePath ();}

You can see that we drew two paths in the canvas.

Note: after calling beginPath (), or when canvas is first built, the first path construction command is usually considered to be moveTo (). So we must first use beginPath () when drawing graphics.

We continue to modify our code:

Function drawLine () {/ / Stroke triangle cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath (); cxt.moveTo (50,50); cxt.lineTo (50,150); cxt.lineTo (150,150); cxt.closePath (); cxt.stroke (); / / broken line cxt.translate (150,0); cxt.strokeStyle =' red'; cxt.lineWidth = 2; cxt.beginPath () Cxt.moveTo (50,50); cxt.lineTo (50,150); cxt.lineTo (150,150); cxt.stroke (); cxt.closePath (); / / Green filled triangle cxt.translate (150,0); cxt.fillStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath (); cxt.moveTo (50,50); cxt.lineTo (50,150); cxt.lineTo (150,150) Cxt.fill (); cxt.closePath (); / / Red filled triangle cxt.translate (150,0); cxt.fillStyle = 'red'; cxt.lineWidth = 2; cxt.beginPath (); cxt.moveTo (50,50); cxt.lineTo (50,150); cxt.lineTo (150,150); cxt.closePath (); cxt.fill ();}

From the above example, we can see that the different location of closePath () will also affect our graphics.

Note: when you call the fill () function, all shapes that are not closed will be closed automatically, so the closePath () function is not necessary at this time.

But call stroke (): if you only use closePath () before the stroke () method to form a closed path, if you call the closePath () method after the stroke () method, the graph has been drawn and the current drawing path has been closed, so the closePath () method does not work.

Line segment and pixel boundary

Let's take a look at an example:

Function drawLine () {/ / Stroke triangle cxt.lineWidth = 1; cxt.beginPath (); cxt.moveTo (50,50); cxt.lineTo (450,50); cxt.stroke (); cxt.beginPath (); cxt.moveTo (50.5, 150.5); cxt.lineTo (450.5, 150.5); cxt.stroke ();}

We can see from the figure that we set the lineWidth of both segments to 1 pixel, but the above segment draws two pixels.

If you draw a line segment 1 pixel wide at a 2 pixel boundary, the line segment will actually occupy a width of 2 pixels.

Because when you draw a vertical line segment with a width of 1 pixel at the pixel boundary, the canvas drawing environment object will try to draw half a pixel on the right side of the boundary center line and the other half pixel on the left side of the boundary center line.

However, it is impossible to draw a line segment half a pixel wide within an entire pixel range, so half a pixel in the left and right directions is expanded to 1 pixel.

On the other hand, draw between two pixels so that the half of the left and right end of the center line does not extend, and they combine to occupy exactly one pixel in width. So, if you want to draw a line segment that is really 1 pixel wide, you have to draw it between two pixels.

The drawing of mesh

Now that we know how to draw a real 1-pixel line segment, let's start drawing the grid.

Function drawLine (stepx, stepy) {cxt.lineWidth = 0.5; cxt.strokeStyle = 'green'; / / draw vertical bar for (var I = stepx + 0.5; I < cxt.canvas.width; ibar = stepx) {cxt.beginPath (); cxt.moveTo (I, 0); cxt.lineTo (I, cxt.canvas.height); cxt.stroke ();} / draw horizontal line for (var I = stepy + 0.5) I < cxt.canvas.height; iTunes = stepy) {cxt.beginPath (); cxt.moveTo (0, I); cxt.lineTo (cxt.canvas.width, I); cxt.stroke ();} drawLine (10,10)

In the above example, we draw a line segment on a pixel between two pixels, and the line segment is only 0.5 pixels wide.

Although there is no explicit provision in the canvas specification, the Canvas implementations of all browsers use "anti-aliasing" technology to create the rendering effect of "sub-pixel" segments.

At this point, I believe you have a deeper understanding of "how to use canvas in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.