HTML canvas lineCap attribute

Definition and usage

lineCap Sets or returns the style of the line end cap.

Huomautus:"round" and "square" makes the line slightly longer.

Example

Drawing the end cap of the circle:

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

Kokeile itse

Syntaksi

context.lineCap="butt|round|square";

Ominaisuusarvo

Arvo Kuvaus
butt Oletus. Lisää suorat reunat jokaiseen viivan päähän.
round Lisää pyöreät kulmat jokaiseen viivan päähän.
square Lisää suorat kulmat jokaiseen viivan päähän.

Tekninen yksityiskohta

Oletusarvo: butt

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.