From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../canvasrenderingcontext2d/linecap/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/es/web/api/canvasrenderingcontext2d/linecap/index.html (limited to 'files/es/web/api/canvasrenderingcontext2d/linecap/index.html') diff --git a/files/es/web/api/canvasrenderingcontext2d/linecap/index.html b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e61f3c1465 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,131 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

La propiedad CanvasRenderingContext2D.lineCap del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.

+ +
+

Nota: La líneas se puede dibujar con los métodos {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, y {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

+
+ +

Sintaxis

+ +
ctx.lineCap = "butt" || "round" || "square";
+
+ +

Opciones

+ +
+
"butt"
+
Los finales de las líneas son recortados. Valor por defecto.
+
"round"
+
Los finales de las líneas son redondeados.
+
"square"
+
Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.
+
+ +

Ejemplos

+ +

Cambiando los finales de línea

+ +

En este ejemplo se redondean los puntos finales de una línea recta.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}

+ +

Comparando los finales de línea

+ +

En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad lineCap. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.

+ +

La línea de la izquiera usa la opción por defecto "butt". Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción "round. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción "square". Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+
+ +

{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegador.

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Ver también

+ + -- cgit v1.2.3-54-g00ecf