Manuel de référence HTML

Tous les balises HTML

Méthode lineTo() de l'élément HTML canvas

lineTo() est une méthode de Canvas 2L'API D utilise la méthode lineTo() pour connecter le point final du sous-chemin à des coordonnées x, y (elle ne dessine pas véritablement).

Référence du manuel HTML canvas

Exemple en ligne

Commencez un chemin, déplacez-vous à la position 0,0. Créez une ligne atteignant la position 300,150 d'une ligne :

Exemple

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode HTML canvas lineTo()-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise 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>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge lineTo() Méthode.

Remarque :Internet Explorer 8 Les versions précédentes de Internet Explorer ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode lineTo() ajoute un nouveau point et crée une ligne de ce point à la dernière position spécifiée sur le canevas (Cette méthode ne crée pas de ligne).

Astuce :Utilisez stroke() La méthode dessine un chemin précis sur le canevas.

Syntaxe JavaScript :	context.lineTo(x,y);

Valeur du paramètre

Paramètre	Description
x	L'abscisse de la position cible du chemin.
y	L'ordonnée de la position cible du chemin.

Exemple en ligne

Tracez un chemin, sous forme de lettre L :

Exemple

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode HTML canvas lineTo()-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise 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>

Voyons voir ‹/›

Référence du manuel HTML canvas

HTML: <template> balise