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

This article mainly introduces the relevant knowledge of "how to draw lines with paths in html5". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "how to draw lines with paths in html5" can help you solve the problem.

For HTML5 Canvas, we can use "path" to draw any figure. A path is simply a series of points and the lines that connect them. Any Canvas context will have only one "current path", which will not be saved when context.save () is called.

The beginning and end of the path

Calling beginPath () starts a path, while calling closePath () ends the path. If you connect the points in the path, then the connection forms a "subpath". If the last point in the subpath is connected to its own first point, we consider the subpath to be "closed".

The drawing of lines

The most basic path operation consists of repeated calls to the moveTo () and lineTo () commands. For example, the following example:

Copy the code

The code is as follows:

Function drawScreen () {

Context.strokeStyle = "black"

Context.lineWidth = 10

Context.lineCap = 'square'

Context.beginPath ()

Context.moveTo (20,0)

Context.lineTo (100,0)

Context.stroke ()

Context.closePath ()

}

In the above example, we drew a horizontal line segment with a width of 10 pixels; at the same time, we also set the lineCap and strokeStyle properties. The following is a list of some commonly used attributes:

LineCap

LineCap defines the style at both ends of the segment in Canvas, which can be set to one of the following three values:

Butt . Default value; add straight edges at both ends of the segment.

Round . Add a semicircular cap at each end of the segment. The diameter of the cap is equal to the width of the segment.

Square . Add a square cap at both ends of the segment. The length of the edge of the cap is equal to the width of the segment.

LineJoin

LineJoin defines the corner style where two segments intersect. The following are three optional values:

Miter . Default value; create a sharp corner. You can limit the sharp corner length by setting the miterLimit property-miterLimit is the maximum ratio of the sharp corner length to the line width, and the default is 10.

Bevel . Create a bevel.

Round . Create a fillet.

LineWidth

LineWidth defines the thickness of the line, which defaults to 1. 0.

StrokeStyle

StrokeStyle defines styles such as colors used to render lines.

Note: when lineJoin is set to miter, but the sharp corner length exceeds the limit of miterLimit, Canvas will display the "bevel" corner effect.

This is the end of the content about "how to draw lines with paths in html5". Thank you for your 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.