Guide de référence HTML

Tous les attributs HTML

Méthode quadraticCurveTo() pour HTML canvas

quadraticCurveTo() est une méthode de Canvas 2L'API D a ajouté une méthode de chemin de courbe quadratique. Elle nécessite2Des points. Le premier point est le point de contrôle, le second point est le point final. Le point de départ est le dernier point du chemin actuel, vous pouvez utiliser la méthode moveTo() pour le modifier avant de créer une courbe quadratique.

Guide de référence HTML canvas

Exemple en ligne

Tracez une courbe quadratique en deux points :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode bezierCurveTo() pour HTML canvas-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　l'attribut canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Vérifiez avec ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

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

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

Définition et utilisation

la méthode quadraticCurveTo() pour ajouter un point au chemin actuel en utilisant les points de contrôle spécifiés pour la courbe quadratique.

La courbe quadratique nécessite deux points. Le premier point est le point de contrôle utilisé pour le calcul de la courbe quadratique, et le second point est le point final de la courbe. Le point de départ de la courbe est le dernier point du chemin actuel. Si le chemin n'existe pas, utilisez beginPath() et moveTo() Méthode pour définir le point de départ.

Point de départ :

moveTo(20,20)

Point de contrôle :

quadraticCurveTo(20,100,200,20)

Point final :

quadraticCurveTo(20,100,200,20)

Astuce :Voir également bezierCurveTo() Méthode. Elle a deux points de contrôle, au lieu d'un seul.

Syntaxe JavaScript :	context.quadraticCurveTo(cpx,cpy,x,y);

Valeur du paramètre

Paramètres	Description
cpx	Coordonnée x du point de contrôle de Bezier.
cpy	Coordonnée y du point de contrôle de Bezier.
x	Coordonnée x de l'extrémité finale.
y	Coordonnée y de l'extrémité finale.

Guide de référence HTML canvas

HTML: <template> balise