Property resolution for Canvas lines

This article mainly and you introduced the canvas line properties of the relevant information, small series feel very good, and now share to everyone, hope to help everyone.

One, the line of the hat LineCap

Value: Butt (default), round round head, Square Square head

var Canvas=document.getelementbyid ("Canvas"); Canvas.width=800;canvas.height=800;var Context=canvas.getcontext (" 2d "); context.linewidth=40;context.strokestyle=" #005588 ";//Three Beginpath () Draw 3 Parallel Lines context.beginpath (); Context.moveto (100,200); Context.lineto (700,200); context.linecap= "Butt"; Context.stroke (); Context.beginPath (); Context.moveto (100,400); Context.lineto (700,400); context.linecap= "Round"; Context.stroke (); Context.beginpath (); Context.moveto (100,600); Context.lineto (700,600); context.linecap= "Square"; Context.stroke ();// Baselinecontext.linewidth=1;context.strokestyle= "#27a"; Context.moveto (100,100); Context.lineto (100,700); Context.moveto (700,100); Context.lineto (700,700); Context.stroke ();

Round do animation When you need rounded corners can be drawn directly, linecap effect can only be used at the beginning and end of the line segment, not for connection.

linecap= "Square" can be used to completely close when a segment is closed, but it is recommended to use Clothpath () closure.

var Canvas=document.getelementbyid ("Canvas"); Canvas.width=800;canvas.height=800;var Context=canvas.getcontext (" 2d "); Context.beginpath (Context.moveto); Context.lineto (500,350); Context.lineto (500,200); Context.lineto (700,400); Context.lineto (500,600); Context.lineto (500,450); Context.lineto (100,450); context.lineTo (100,350);//Context.closepath (); Recommended context.linewidth=10;context.linecap= "Square"; Context.fillstyle= "Yellow" is not recommended; context.strokestyle= "#058" Context.fill (); Context.stroke ();

Two, draw a pentagram, indicating the line other State properties

Five corners on the circle split 360°, each angle 72°,90°-72°=18°

The corner of the small circle equally 72°,18°+36°=54°

Angle to radians--radians = angle *π/180 (18+i*72) *math.pi/180

var Canvas=document.getelementbyid ("Canvas"); Canvas.width=800;canvas.height=800;var Context=canvas.getcontext (" 2d "); Context.beginpath ();//angle to radians: divided by 180*pifor (var i=0;i<5;i++) {    Context.lineto (Math.Cos (18+i*72)/180* Math.PI) *300+400,        -math.sin ((18+i*72)/180*math.pi) *300+400);    Context.lineto (Math.Cos ((54+i*72)/180*math.pi) *150+400,        -math.sin ((54+i*72)/180*math.pi) *150+400);} Context.closepath (); Context.linewidth=10;context.stroke ();

Encapsulated into functions:

Window.onload=function () {    var Canvas=document.getelementbyid ("Canvas");    canvas.width=800;    canvas.height=800;    var Context=canvas.getcontext ("2d");    context.linewidth=10;    Drawstar (context,150,300,400,400)}        function Drawstar (ctx,r,r,x,y,) {    ctx.beginpath ();    Angle to radians: divided    by 180*pi for (Var i=0;i<5;i++) {        Ctx.lineto (Math.Cos (18+i*72)/180*math.pi) *r+x,            - Math.sin ((18+i*72)/180*math.pi) *r+y);            Ctx.lineto (Math.Cos ((54+i*72)/180*math.pi) *r+x,            -math.sin ((54+i*72)/180*math.pi) *r+y);    }    Ctx.closepath ();    Ctx.stroke ();}

Modify the small r=80,200,400 to get the following graphic

Add a clockwise rotation parameter: rot

Window.onload=function () {    var Canvas=document.getelementbyid ("Canvas");    canvas.width=800;    canvas.height=800;    var Context=canvas.getcontext ("2d");    context.linewidth=10;    Drawstar (context,150,300,400,400,30);}        Rot clockwise rotation of the angle function Drawstar (ctx,r,r,x,y,rot) {    ctx.beginpath ();    Angle to radians: divided    by 180*pi for (Var i=0;i<5;i++) {        Ctx.lineto (Math.Cos (18+i*72-rot)/180*math.pi) *r+x,            - Math.sin ((18+i*72-rot)/180*math.pi) *r+y);            Ctx.lineto (Math.Cos ((54+i*72-rot)/180*math.pi) *r+x,            -math.sin ((54+i*72-rot)/180*math.pi) *r+y);    }    Ctx.closepath ();    Ctx.stroke ();}

The effect of rotating 30 degrees is as follows:

Third, the line connection LineJoin and Miterlimit

1, LineJoin value

Miter (default) always presents a sharp angle, bevel miter, round fillet

Bevel like ribbons folded down the effect.

2. Properties of miter related Miterlimit

Set small R to 30,linejoin as Miter, the effect is as follows: The angle does not extend to the sharp angle, but takes the bevel way to display.

Context.linejoin= "Miter";d Rawstar (context,30,300,400,400,30);

Why?

Because the default value of context.miterlimit=10 is 10,

Miterlimit only works when LineJoin is miter.

Miterlimit refers to the maximum value of the distance between the inner angle and the outer corner when the miter is used as a line and line.

The default value is 10, which means that the maximum value is 10px, and once the 10px is exceeded, it will be displayed using the Bevel method.

The Inner circle radius r is set to 30 o'clock, the sharp angle is very sharp, the interior angle and outer corner distance is more than 10 of the miterlimit.

Now change the Miterlimit to 20, the effect is as follows:

Context.linejoin= "Miter"; context.miterlimit=20; Drawstar (context,30,300,400,400,30);

Note: The miterlimit is not a distance from the white tip to the black tip, which is far greater than 20px.

When the Miterlimit is produced, it must be the width of the line, with the width of the line in the middle of the sharp angle of the point and the outside sharp angle direct distance.

The

Canvas gives a miterlimit experience value of 10. It is only in extremely special circumstances that it is necessary to change the miterlimit when a very sharp angle is required.