Original text:
code is as follows:

function drawScreen () {
context. The strokeStyle="black";
context. Our lineWidth=10;
the context, lineCap='square';
the context. The beginPath ();
the context. The moveTo (20, 0);
the context. The lineTo (100, 0);
the context. The stroke ();
the context. The closePath ();

in the above example, we had painted a horizontal line segments, width of 10 pixels; At the same time, we also set the lineCap and strokeStyle attribute. The following is a list of some commonly used attributes:

lineCap defines the end of the line segment in the Canvas style, can be set to one of the following three values:

butt. The default value; Add straight edges at the two ends of the line segment.
round. At the two ends of the line segment each add a semicircle line cap. Line cap diameter is equal to the width of the line segment.
square. At the two ends of the line to add a square line cap. Line cap side length is equal to the width of the line segment.
the lineJoin defines the style of the two line segments intersect in the corner. Here are three optional value:

miter. The default value; Create a sharp corners. Can set miterLimit properties to limit to the length of the Angle – MiterLimit wedge Angle as the ratio of the length and width of maximum value, the default is 10.
the bevel. Create a bevel.
round. Create a rounded.
our lineWidth
our lineWidth defines the line thickness, the default is 1.0.

strokeStyle defines the color for rendering line style, etc.


This concludes the body part