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

This article is about what the commonly used line attribute value of Canvas in HTML5 is, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article, without saying much, follow the editor to have a look.

Overview of Line Properti

There are four properties of a line:

1. LineCap attribute

LineCap defines the endpoint of the centerline in the context, which can have the following three values.

Butt: the default value, the endpoint is a straight edge perpendicular to the edge of the segment.

Round: the endpoint is a semicircle with a line width of diameter at the edge of the segment.

Square: the endpoint is a rectangle with a line width of length and half of the line width at the edge of the selected segment.

2. LineJoin attribute

LineJoin defines the corner caused by the intersection of two lines, which can be called a connection. Create a filled triangle at the connection, and you can use lineJoin to set its basic properties.

Miter: the default value, which extends the connection at the edge of the joint. MiterLimit is the maximum allowable ratio of corner length and lineweight (default is 10).

Bevel: the joint is a diagonal diagonal.

Round: the joint is a circle.

3. Linewidth

LineWidth defines the width of the line (the default is 1.0).

4. Stroke style

StrokeStyle defines the color and style of lines and shape borders.

The last two have been mentioned before, so let's focus on the first two attributes.

Hat with lines lineCap

Don't talk too much nonsense, just go to the code to see the effect.

JavaScript Code copies content to the clipboard

Line hat your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.lineWidth = 50; context.strokeStyle = "# 1BAAAA"; context.beginPath (); context.moveTo (100100); context.lineTo (700100) Context.lineCap = "butt"; context.stroke (); context.beginPath (); context.moveTo (100300); context.lineTo (700300); context.lineCap = "round"; context.stroke (); context.beginPath (); context.moveTo (100500); context.lineTo (700500) Context.lineCap = "square"; context.stroke (); / / draw two baselines below to facilitate observation context.lineWidth = 3; context.strokeStyle = "black"; context.beginPath (); context.moveTo (100Leme0); context.lineTo (100600); context.moveTo (700L0); context.lineTo (700600) Context.stroke ();}

Running result:

Here I also do two parallel lines for reference, so that I can see the characteristics of the three values of lineCap at a glance. Note, however, that this hat only works at the end of the line, and even a broken line with a lot of broken points only wears a hat at the beginning and end. If you want to change the style of the line break (where the two segments join), use the following lineJoin property.

Connection lineJoin of lines

Don't talk too much nonsense, just go to the code to see the effect. This code is changed from 4-3, only to set the properties of the connection.

JavaScript Code copies content to the clipboard

Line connection your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (100100); context.lineTo (300300); context.lineTo (100500); context.lineJoin = "miter" Context.lineWidth = 20; context.strokeStyle = "red"; context.stroke (); context.beginPath (); context.moveTo (300100); context.lineTo (500300); context.lineTo (300500); context.lineJoin = "bevel"; context.lineWidth = 20; context.strokeStyle = "blue"; context.stroke () Context.beginPath (); context.moveTo (500100); context.lineTo (700300); context.lineTo (500500); context.lineJoin = "round"; context.lineWidth = 20; context.strokeStyle = "black"; context.stroke ();}

Running result:

Children's shoes that you can't see clearly enlarge the web page or make the line width of the code a little wider.

There is a very hidden property here, that is, when lineJoin is set to miter (default), a score will be unlocked, and the miterLimit property can be used.

Let me give you an example.

JavaScript Code copies content to the clipboard

MiterLimit, your browser doesn't support Canvastes! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (100100); context.lineTo (300300); context.lineTo (100500); context.lineJoin = "miter" Context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "red"; context.stroke (); context.beginPath (); context.moveTo (300200); context.lineTo (500300); context.lineTo (300400); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5 Context.strokeStyle = "blue"; context.stroke (); context.beginPath (); context.moveTo (500290); context.lineTo (700300); context.lineTo (500310); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "black"; context.stroke () }

Running result:

You will find that this miterLimit specifies a limit for automatically filling join points. If this value is exceeded, the lineJoin property will be invalidated, changing from miter to bevel. You can see that this value has something to do with the linewidth and the angle. Look at the picture below.

As you can see, the relationship is a little complicated. Interested partners can deduce the functional relationship between this value and linewidth and angle. In fact, most of the time do not use this hidden attribute, even if you use it, you can write a number and then debug it if you are not satisfied.

Examples of advanced line segment drawing

When you actually draw line segments on the canvas, there will be some strange phenomena. Here you will combine the attributes of the two line segments learned in this lesson to explain one.

JavaScript Code copies content to the clipboard

MiterLimit, your browser doesn't support Canvastes! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); / / instance 1: round end, beveled connection, context.beginPath () in the upper left corner of the canvas; context.moveTo (0); context.lineTo (180) Context.lineTo (180180); context.lineJoin = 'bevel'; context.lineCap =' round'; context.lineWidth = 10; context.strokeStyle = "red"; context.stroke (); / / instance 2: round end, beveled connection, not in the upper left corner of the canvas context.beginPath (); context.moveTo (300200) Context.lineTo (480200); context.lineTo (480380); context.lineJoin = 'bevel'; context.lineCap =' round'; context.lineWidth = 10; context.strokeStyle = "blue"; context.stroke (); / / instance 3: straight end, circular connection, not in the upper left corner of the canvas context.beginPath () Context.moveTo (600400); context.lineTo (780400); context.lineTo (780580); context.lineJoin = 'round'; context.lineCap =' butt'; context.lineWidth = 10; context.strokeStyle = "black"; context.stroke ();}

Running result:

Examples of these three segments and connections help to illustrate the combination of different attributes when drawing segments on the canvas.

Example 1 tries to draw from the upper left corner of the canvas, and a strange phenomenon occurs. The Canvas path is drawn outside the start point in both the x-axis and y-axis directions. For this reason, the line above example 1 looks thinner. In addition, the circular endpoints in the horizontal part of the upper left corner are not visible, and they are all drawn to the negative coordinate area outside the screen. In addition, the diagonal diagonal defined by lineJoin is not drawn.

Example 2 adjusts the problem in example 1 by moving the starting point away from the upper-left corner. In this way, a complete horizontal line is drawn, and the circular lineCap and bevel lineJoin are drawn.

Example 3 shows the default endpoint effect without the lineCap setting and adjusts the lineJoin to a fillet.

These are the common line attribute values of Canvas in HTML5, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.