Manuel de référence HTML

Tous les étiquettes HTML

Méthode arcTo() HTML canvas

arcTo() est une méthode Canvas 2L'API D dessine un chemin d'arc circulaire en utilisant le point de dessin actuel (le point d'arrivée du dernier moveTo ou lineTo, etc.). Selon le point de dessin actuel et le point de contrôle donné1Les lignes connectées, et le point de contrôle1et le point de contrôle2Les lignes connectées, servant de tangentes à l'arc d'un cercle de rayon spécifié, dessinent un chemin d'arc entre les deux tangentes.

Manuel de référence HTML canvas

Exemple en ligne

Créer un arc entre deux tangentes sur le canevas :

JavaScript：

Exemple

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　　　　　　　　　　　//　Créer un point de départ
ctx.lineTo(100,20);　　　　　　　　　　//　Créer une ligne horizontale　
ctx.arcTo(150,20,150,70,50);　//　Créer un arc
ctx.lineTo(150,120);　　　　　　　　　//　Créer une ligne verticale
ctx.stroke();　　　　　　　　　　　　　　　　//　Le dessiner
</script>
</body>
</html>

Vérifiez et voyez si vous pouvez le faire ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Définition et utilisation

La méthode arcTo() crée un arc entre deux tangentes sur le canevas/Courbe.

Avis :Utilisez stroke() Méthode pour dessiner un arc précis sur le canevas.

Syntaxe JavaScript :	context.arcTo(x1,y1,x2,y2,r);

Valeur des paramètres

Paramètres	Description
x1	la coordonnée horizontale de l'intersection des deux lignes de coupe.
y1	la coordonnée verticale de l'intersection des deux lignes de coupe.
x2	la coordonnée horizontale d'un point sur la deuxième ligne de coupe.
y2	la coordonnée verticale d'un point sur la deuxième ligne de coupe.
r	le rayon de l'arc.

où les coordonnées cartésiennes d'un point quelconque de la première ligne sont la position de l'ultimo point, dans cet exemple c'est 100,20. Par (x1,y1),(x2,y2,(100,20) Trois points déterminent la position de deux droites et la position de l'arc est déterminée par le rayon.

Manuel de référence HTML canvas

HTML: <template> balise