La propiedad canvas lineCap se usa para establecer o devolver el estilo de las tapas de los extremos de la línea. La línea puede tener uno de los tres estilos de tapa: trasero , redondo o cuadrado . El valor predeterminado de la propiedad canvas lineCap es butt. La propiedad lineCap debe establecerse antes de llamar a la función stroke().
Sintaxis:
context.lineCap = "butt|round|square";
Valores de propiedad:
- trasero: Es el estilo por defecto. Este valor de propiedad agrega el borde plano en cada extremo de la línea.
- round: este valor de propiedad agrega la tapa final en cada extremo de la línea.
- cuadrado: este valor de propiedad agrega el límite cuadrado en cada extremo de la línea.
Nota: El valor redondo y cuadrado hace que la línea sea un poco más larga.
Ejemplo 1: Este ejemplo ilustra el valor de la propiedad butt.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas lineCap Property
</title>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>HTML canvas lineCap Property</h2>
<canvas id="GFG" width="500" height="200"
style="border:1px solid black;">
</canvas>
<script>
var canvas_id = document.getElementById("GFG");
var context = canvas_id.getContext("2d");
context.beginPath();
context.lineWidth = 35;
context.lineCap = "butt";
context.moveTo(50, 100);
context.lineTo(450, 100);
context.strokeStyle ="green";
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra el valor de la propiedad redonda.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas lineCap Property
</title>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>HTML canvas lineCap Property</h2>
<canvas id="GFG" width="500" height="200"
style="border:1px solid black;">
</canvas>
<script>
var canvas_id = document.getElementById("GFG");
var context = canvas_id.getContext("2d");
context.beginPath();
context.lineWidth = 35;
context.lineCap = "round";
context.moveTo(50, 100);
context.lineTo(450, 100);
context.strokeStyle ="green";
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo ilustra el valor de la propiedad cuadrada.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas lineCap Property
</title>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>HTML canvas lineCap Property</h2>
<canvas id="GFG" width="500" height="200"
style="border:1px solid black;">
</canvas>
<script>
var canvas_id = document.getElementById("GFG");
var context = canvas_id.getContext("2d");
context.beginPath();
context.lineWidth = 35;
context.lineCap = "square";
context.moveTo(50, 100);
context.lineTo(450, 100);
context.strokeStyle ="green";
context.stroke();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA