Manual de referencia HTML

Completos de etiquetas HTML

Método HTML canvas lineTo()

lineTo() es el método de Canvas 2D API utiliza el método lineTo() para conectar el final de una subruta al punto x, y (este método no dibuja realmente).

Manual de referencia de HTML canvas

Ejemplo en línea

Comenzar una línea, moverse a la posición 0,0. Crear una línea que 300,150 de una línea:

示例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método HTML canvas lineTo()</title>-Tutoriales básicos(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten lineTo() Métodos.

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método lineTo() agrega un nuevo punto y crea una línea desde ese punto hasta el último punto especificado en el lienzo (este método no crea la línea).

Consejo:Por favor utilice stroke() Método para dibujar una ruta exacta en el lienzo.

Sintaxis de JavaScript:	context.lineTo(x,y);

Valor del parámetro

Parámetros	Descripción
x	La coordenada x del punto de destino de la línea.
y	La coordenada y del punto de destino de la línea.

Ejemplo en línea

Dibujar una línea de forma que sea la letra L:

示例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método HTML canvas lineTo()</title>-Tutoriales básicos(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
</script>
</body>
</html>

Prueba y mira ‹/›

Manual de referencia de HTML canvas

HTML: <template> etiqueta