HTML canvas lineTo()Método
Objeto CanvasEjemplo
Inicia una ruta, muévete a la posición 0,0. Crea una línea hasta la posición 300,150:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Pruébalo »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método lineTo().
Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.
Definición y uso
El método lineTo() agrega un nuevo punto y luego crea una línea desde ese punto hasta el último punto especificado en el lienzo (este método no crea la línea).
Sugerencia:Utilicestroke()el método para dibujar la ruta exacta en el lienzo.
| Sintaxis de JavaScript: | context.lineTo(x,y); |
|---|
Valores de parámetros
| Parámetro | Descripción |
|---|---|
| x | La coordenada x de la posición de destino de la ruta. |
| y | La coordenada y de la posición de destino de la ruta. |
Más ejemplos
Ejemplo
Dibuja una ruta con forma de letra L:
JavaScript：
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();
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
Pruébalo »
Otras extensiones