Comments: When learning to draw, the line is the most basic, and the connection of the line can form any image. This is also true for Canvas. Next we will introduce you in detail the simplest Line Painting method. If you do not know what Canvas is, you can refer to the previous article.
When learning to draw a picture, the line is the most basic, and the connection of the line can form any image. This is also true in Canvas.
Before we start, we need to take out the canvas and paint brush:
The Code is as follows:
Var cvs = document. getElementById ('cvs '); // canvas
Var ctx = cvs. getContext ('2d '); // paint brush
When we draw pictures, writing points are not fixed and will change at any time. Although canvas is not determined by hand, there is also a method, that is, moveTo. MoveTo moves the pen tip out of the canvas and then to the specified point (coordinate ).
The Code is as follows:
Ctx. moveTo (x, y)
In this process, no image will be drawn, which is equivalent to shaking your pen on the canvas.
But it is useless to shake it. We must start painting. First draw the simplest: Straight Line
The method for drawing a straight line is lineTo. Its parameters are the same as those of moveTo, and they are all points.
Ctx. lineTo (x, y) Of course, when you draw a line, the pen points also move, so after lineTo, the pen point becomes his target point.
The Code is as follows:
Ctx. moveTo (100,100 );
Ctx. lineTo (200,100 );
When you refresh the page, you will find that there is no line on the canvas, and there is nothing. Because we still have a step missing. lineTo is actually a "path", which is invisible. To display the image, you must "Draw" the image.
Those who have used PS will surely be able to know the two modes of graphics: Fill and stroke. Now we have drawn a line, which is equivalent to a path in PS. At this time, we can draw a line to show the image.
The canvas stroke method is stroke (). Now let's complete the Code:
The Code is as follows:
Ctx. moveTo (100,100 );
Ctx. lineTo (200,100 );
Ctx. stroke (); refresh now and you will see a line. Of course, you can also draw hundreds of paths in a row, and then perform the stroke action to draw hundreds of lines. Now we can draw a rectangle with four lines:
The Code is as follows:
Ctx. moveTo (100,100 );
Ctx. lineTo (200,100 );
Ctx. lineTo (200,200 );
Ctx. lineTo (100,200 );
Ctx. lineTo (100,100 );
Ctx. stroke ();
Here we will first plot all the paths and then draw the edges at one time.
--- The author's complaint: the poor side of Canvas plotting is that it is not intuitive to guess.
Note: The Painting Process of canvas (that is, filling and stroke) consumes a lot of resources. To save system resources and improve efficiency, it is best to draw all the paths, fill or stroke the image at a time.
We can see from the figure above that the default line width is 1px, and the line color is black. Of course we can set them, But the strange thing is that the line width is lineWidth, while the line style is strokeStyle. Why not lineStyle? I don't know. :
The Code is as follows:
Ctx. lineWidth = 10;
Ctx. strokeStyle = 'rgba (255,0, 0, 0.5 )';
The code above sets the line width to 10px, and the line color turns translucent red.
1. refresh it. It seems a bit wrong! Why is a small piece missing in the upper left corner? This is not an illusion. The reason is to start with the canvas line drawing method.
Q: If the width and height of the rectangle I drew are both 100, and the width of the edge is 10 PX, what is the overall width and height of the rectangle with the stroke? Is it 100 + 10*2 = 120?
If the edge line is completely mapped to the outside of the path, it is 120. But Canvas is not. The lines in the Canvas have a "midline", which is in the absolute middle of the line, and the strokes of the line expand to both sides. For example, if the width of your line is 1, the midline is at 0.5; if the width is 5, the midline is at 2.5. When painting a canvas image, the path is aligned with the midline of line, and then the stroke. 2:
Therefore, when the stroke is performed, the half of the line is on the outer side and the half is on the inner side. That is, the overall width of the above rectangle is 100 + (10/2) * 2, equal to 110.
It is precisely for this reason that there is a gap in the upper left corner. Because no one draws the image here.
But why are there no gaps in other corners? Isn't there a gap between the four corners of your graph?
That's because I didn't "pick up" the paint brush during the painting process, and the paint brush was continuous, that is, no moveTo. If you don't believe it, let's use moveTo:
The Code is as follows:
Ctx. moveTo (100,100 );
Ctx. lineTo (200,100 );
Ctx. moveTo (200,100); // pay attention to this
Ctx. lineTo (200,200 );
Ctx. lineTo (100,200 );
Ctx. lineTo (100,100 );
Ctx. lineWidth = 10;
Ctx. strokeStyle = 'rgba (255,0, 0, 0.5 )';
Ctx. stroke ();
Before we draw the second line, we moved to the next line, and moveTo didn't even change, but it was still that point. However, after refreshing, the figure became like this [Figure 3]:
Understand? Because we picked up the pen.
Now let's delete moveTo and don't worry about him. Let's think about how to add the missing corner in the upper left corner?
First, let's ask a question: is our path closed? Isn't that nonsense? Have we already taken the path back to the origin? Of course it is closed!
Error! In this way, the last point and start point of the path overlap, but the path itself is not closed!
How does Canvas close the path? Use closePath ().
The Code is as follows:
Ctx. moveTo (100,100 );
Ctx. lineTo (200,100 );
Ctx. lineTo (200,200 );
Ctx. lineTo (100,200 );
Ctx. lineTo (100,100 );
Ctx. closePath (); // closed path
Ctx. lineWidth = 10;
Ctx. strokeStyle = 'rgba (255,0, 0, 0.5 )';
Ctx. stroke ();
At this time, refresh is a perfect square. Figure 4:
No matter how many lines we change to, the thicker the lines, the more people like them, right? ---- The four corners of the Square are the right angle of the rule, and there will be no smooth situation. What is the smooth angle? See the square stroke in PS, figure 5:
See, the thicker the edge, the larger the arc of his angle.
If I want the edges in the Canvas to be the same as PS, is there any way? Of course, this is the lineJoin attribute.
LineJoin refers to the intersection of a line. It has three attributes: miter (default, sharp angle), bevel (diagonal angle), round (rounded corner), and 6:
Without a doubt, we can understand that our rectangle uses a sharp angle, so we try to change it to a rounded corner:
Figure 7:
A bit like PS, right?
In addition, we learned from the previous figure that the two sides of the Canvas line are flat. Can we change it? After all, it is not easy to understand.
Yes, that is, the lineCap attribute. This is the end point of the defined line. LineCap has three values: butt (flat, default), round (circle), square (square), 8
You can see from the figure that the split head is the same as the square head, but the difference is that the split head is not stretched out. The Circle head and the square head both extend out. How long is this section? That is, half of the line width.
Did you think of anything? Haha, the previous closed path problem. If we set lineCap as the square header, the effect will be the same!
But for the sake of insurance, we still need to close the path. Remember!
I also want to remind you that the closed path has no endpoint! Therefore, the endpoint style is invisible to the closed path.
In addition: LineCap is similar to lineJoin. Do not confuse lineCap with lineJoin.
If your eyes are sharp and you are lucky, you may find that sometimes the line of 1 pixel is not 1 pixel wide, it seems to be wider and blurrier. 9:
Congratulations! You have encountered a bug that is not a bug. This is very special. Let me put it in the next article.
