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

This article is about how html5 Canvas draws straight lines and sets the style of lines. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

When learning to draw, lines are the most basic, and the connections of lines can form any figure. The same is true in Canvas.

Before we begin, let's take out the canvas and brush:

The code is as follows:

Var cvs = document.getElementById ('cvs'); / / canvas

Var ctx = cvs.getContext ('2d'); / / brush

When we draw, the writing point is not fixed and can change at any time. Although canvas does not decide the point of writing by hand, there is also a way, that is, moveTo. The role of moveTo is equivalent to lifting the tip of the pen off the canvas and moving it to a specified point (that is, coordinates).

The code is as follows:

Ctx.moveTo (XBI y)

No graphics will be drawn in the process, which is equivalent to dangling your pen on the canvas.

But it's no use dangling around. We have to start painting. Draw the simplest one first: a straight line

The method of drawing a straight line is lineTo, whose parameters are the same as those of moveTo, which is the same point.

Ctx.lineTo (xpencil y) of course, when you draw a line, the pen point moves with it, so the pen point becomes his target point after lineTo.

The code is as follows:

Ctx.moveTo (100100)

Ctx.lineTo (200100)

When you refresh the web page, you will find that there is no expected line on the canvas, nothing. Because we are missing a step. LineTo is actually a "path" of painting, which itself is invisible. If we want him to show it, we must "draw" him.

Students who have used PS must know two modes of graphics, one is filling, the other is strokes. Now that we have drawn a line, which is equivalent to a path checked in PS, we can draw the bottom of the path at this time and the graph will be displayed.

The method of canvas stroke is stroke (). Now let's complete the code:

The code is as follows:

Ctx.moveTo (100100)

Ctx.lineTo (200100)

Ctx.stroke (); refresh at this time, and you will see a line. Of course, you can also draw hundreds of paths in succession, and then perform the stroke action, you can draw hundreds of lines at once. Now let's draw a rectangle with four lines:

The code is as follows:

Ctx.moveTo (100100)

Ctx.lineTo (200100)

Ctx.lineTo (200200)

Ctx.lineTo (100200)

Ctx.lineTo (100100)

Ctx.stroke ()

Here we just draw the whole path first, and then stroke it all at once.

-the author's complaint: there is a bad thing about Canvas drawing: it basically depends on guessing, which is not intuitive.

Serious hint: canvas drawing process (that is, filling and strokes) is very resource-consuming, if you want to save system resources to improve efficiency, it is best to draw all the paths, and then fill or stroke graphics at one time.

From the figure above, we can see that the default line thickness is 1px, and the line color is black. Of course, we can set them, but the strange thing is that the line width is set to lineWidth, while the line style is called strokeStyle, why not lineStyle? I don't know either. :

The code is as follows:

Ctx.lineWidth = 10

Ctx.strokeStyle = 'rgba (255pc0pm 0pr 0pr 0.5)'

The above code sets the line width to 10px and the line color to translucent red.

As shown in figure 1, refresh it, there seems to be something wrong! Why is there a small piece missing in the upper left corner? It's not an illusion. The reason should start with the way canvas lines are drawn.

Question: if I draw a rectangular path with a width and height of 100, and my boundary width is 10px, what is the overall width and height of the rectangle with edges? Is it 100, 10, 2, 120?

If the boundary line is completely drawn on the outside of the path, it is 120. But Canvas is not. All the lines in the Canvas have a "center line", which is located in the absolute middle of the line, and the strokes of the lines extend to both sides with the center line. For example, if your line width is 1, then the center line is 0.5; if the width is 5, the center line is 2.5. Canvas graphics in the stroke, the path is fitted to the middle line of the line, and then stroke. Figure 2:

So, when stroking, half of the line is on the outside and half on the inside, that is, the overall width of the upper rectangle is 100 + (10 impulse 2) * 2, equal to 110.

It is precisely for this reason that it is taken for granted that there is a missing corner in the upper left corner. Because no one painted it here.

But why is there no gap in the rest of the corners? Look at your picture, isn't there a gap in all four corners?

That's because I didn't "lift" the brush in the process of drawing lines, and the brushes were continuous, that is, there was no moveTo. If you don't believe me, let's moveTo:

The code is as follows:

Ctx.moveTo (100100)

Ctx.lineTo (200100)

Ctx.moveTo (200100); / / Note here

Ctx.lineTo (200200)

Ctx.lineTo (100200)

Ctx.lineTo (100100)

Ctx.lineWidth = 10

Ctx.strokeStyle = 'rgba (255pc0pm 0pr 0pr 0.5)'

Ctx.stroke ()

We moveTo a bit before we draw the second line, and the moveTo does not even change the coordinates, the same point, but after refreshing the graph looks like this [figure 3]:

All right? Because we picked up the pen.

Now let's delete moveTo, don't worry about him, let's think about how to make up for the missing corner in the upper left corner.

First of all, let me ask you a question, is our path closed? Isn't that nonsense? haven't we already turned the path back to the origin? Of course it's closed!

Wrong! This only makes the last point of the path coincide with the starting point, but the path itself is not closed!

How does Canvas close the path? Use closePath ().

The code is as follows:

Ctx.moveTo (100100)

Ctx.lineTo (200100)

Ctx.lineTo (200200)

Ctx.lineTo (100200)

Ctx.lineTo (100100)

Ctx.closePath (); / / closed path

Ctx.lineWidth = 10

Ctx.strokeStyle = 'rgba (255pc0pm 0pr 0pr 0.5)'

Ctx.stroke ()

Refresh at this time, it is a perfect square. Figure 4:

No matter how thick we change the lines-the thicker they are, the more people like them, right? -the four corners of this square are regular right angles, and there will be no smoothness. What about the sleek corners? Look at the square stroke in PS, figure 5:

See, the thicker the boundary, the bigger the arc of his corner.

If I want the edges of Canvas to be the same as those of PS, is there any way? There is, of course, the lineJoin attribute.

LineJoin, which means the intersection of lines, has three attributes: miter (default, sharp corner), bevel (bevel), and round (fillet), as shown in figure 6:

There is no doubt that we can see at once that our rectangle uses sharp corners, so try to change it to rounded corners:

The graph looks like this, figure 7:

It's kind of like PS, right?

In addition, through the previous figure, we know that the two ends of the Canvas line are flat, can it be changed? Bi Jingping is not pretty.

It is also possible, that is, the lineCap property, which defines the endpoint of the line. LineCap has three values: butt (flat, default), round (circle), and square (square), as shown in figure 8

If you look at the picture, you can see that, in fact, the flat head is the same as the square head, except that the flat head does not stick out. Both the round head and the square head will stick out. How long is this section? It's half the width of the line.

Did you think of anything? Haha, the previous closed path problem, if we set lineCap as the square head, the effect will be the same!

But to be on the safe side, we still have to close the path, remember!

I would also like to remind you that closed paths have no endpoints! So you can't see the style of the end on the closed path.

In addition: lineCap is a bit similar to lineJoin, so be careful not to get confused.

If you are sharp-eyed and unlucky, you may find that sometimes the line of 1 pixel is not 1 pixel wide, it seems to be wider and blurry. As shown in figure 9:

Thank you for reading! This is the end of the article on "how to draw straight lines and set the style of lines in html5 Canvas". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.