English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il metodo lineTo() dell'API Canvas 2D connette il punto finale del percorso sottostante con le coordinate x, y (non disegna veramente la linea).
Manuale di riferimento di HTML canvas
Inizia un percorso, muovi alla posizione 0,0. Crea una linea che arriva alla posizione 300,150:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo lineTo() di HTML canvas - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 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>Prova a vedere ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano lineTo() Metodo.
Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.
Il metodo lineTo() aggiunge un nuovo punto e crea una linea da questo punto al punto last specificato sul canvas (questo metodo non crea la linea).
Suggerimento:Usa stroke() Il metodo disegna un percorso esatto sul canvas.
| Sintassi JavaScript: | context.lineTo(x,y); |
|---|
| Parametro | Descrizione |
|---|---|
| x | L'asse x della posizione di destinazione del percorso. |
| y | L'asse y della posizione di destinazione del percorso. |
Disegna un percorso, la forma è la lettera L:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo lineTo() di HTML canvas - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 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>Prova a vedere ‹/›