In HTML5, The lineCap endpoint style encounters closePath (), html5linecap

In HTML5, The lineCap endpoint style encounters closePath (), html5linecap

 

Definition and usage

Set the lineCap attribute or return the style of the end line cap.

Note: "round" and "square" make the line slightly longer.

Default Value:	Butt
JavaScript Syntax:	Context. lineCap = "butt | round | square ";

Attribute Value

Value	Description
Butt	Default value. Add straight edges to each end of a line.
Round	Add a circle cap to each end of the line.
Square	Add a Square Line cap to each end of the line.

Example

Var c = document. getElementById ('mycanvas '); var ctx = c. getContext ("2d"); // obtain the context 2d environment var lineCap = ["butt", "round", "square"]; ctx. strokeStyle = "red"; ctx. beginPath (); ctx. moveTo (10, 10); ctx. lineTo (10,150); ctx. moveTo (150,10); ctx. lineTo (150,150); ctx. stroke (); ctx. closePath (); for (var I = 0; I <lineCap. length; I ++) {ctx. strokeStyle = "blue"; ctx. lineWidth = 20; ctx. lineCap = lineCap [I]; ctx. beginPath (); ctx. moveTo (10, 30 * I + 20); ctx. lineTo (150,30 * I + 20); ctx. stroke (); ctx. closePath (); // the positions of the two rows cannot be reversed. If the path is closed and then drawn, no endpoint style exists };