Tutoriel de dessin sur toile html5 (7) : méthode quadraticCurveTo pour dessiner des courbes dans les compétences du didacticiel canvas

Tutoriel de dessin sur toile html5 (7) : méthode quadraticCurveTo pour dessiner des courbes dans les compétences du didacticiel canvas_html5

WBOY

Libérer： 2016-05-16 15:50:11

original

1499 Les gens l'ont consulté

Continuant à parler de la méthode de dessin de courbes dans Canvas, nous parlerons aujourd'hui de quadraticCurveTo.
Pour être honnête, cette méthode est un peu effrayante. Vous pouvez en faire l'expérience pour la première fois uniquement à partir du nom de la fonction. D'ailleurs, je pense qu'il faut raccourcir le nom de cette fonction.
Quadratique signifie quadratique, qui est le degré quadratique de l'équation quadratique en mathématiques. Les paramètres de ctx.quadraticCurveTo sont les suivants :

Copiez le code

Le code est le suivant :

ctx .quadraticCurveTo(x1,y1,x,y);

où x,y sont les coordonnées du point final et x1,y1 sont les coordonnées du contrôle de courbe indiquer? Quoi? Vous me demandez où est le point de départ ? Le point de départ est préalablement déterminé à l'aide de moveTo.
La raison pour laquelle j'ai mis les coordonnées des points de contrôle avec le numéro de série 1 est qu'une fonction pour tracer une courbe évoquée plus loin a deux points de contrôle, à savoir x2 et y2, voici donc un tir de précaution.
Le point de départ déterminé par moveTo et le point final déterminé par quadraticCurveTo lui-même peuvent être connectés en une ligne droite. Puisque quadraticCurveTo n'a qu'un seul point de contrôle, ce point de contrôle se trouve soit sur le côté gauche de la ligne droite, soit sur la droite. côté de la ligne droite, quadraticCurveTo ne peut donc dessiner que des arcs, mais ne peut toujours pas dessiner une forme en S.

Afin de faciliter la compréhension, j'utilise toujours la méthode de dessin de lignes auxiliaires de l'article précédent. Le code préliminaire est le suivant :

Copier le code

Le code est le suivant :

var x1=350,
y1 = 250,
x = 400,
y = 500;
ctx.beginPath(); >ctx.moveTo(300,300 ); //Point de départ
ctx.quadraticCurveTo(x1,y1,x,y); //Courbe réelle
ctx.stroke();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);//Cette ligne et la ligne suivante sont des lignes pour dessiner des points de contrôle
ctx.lineTo(x,y);
ctx.moveTo(300,300);//Commencer à connecter le point de départ et le point final de la courbe
ctx.lineTo(x, y);
ctx.AVC();

Ici, j'ai dessiné deux lignes auxiliaires, l'une est la ligne de connexion entre le point de départ et le point final, et l'autre est la ligne auxiliaire du point de départ au point de contrôle puis au point final (en fait deux). L'intersection de ces deux lignes est quadraticCurveTo Coordonnées du point de contrôle.

quadraticCurveTo ne peut dessiner que des courbes en forme d'arc, mais cet arc peut être très irrégulier, ce qui est une amélioration par rapport à arc et arcTo.
De plus, quadraticCurveTo ne sera pas inversé comme arcTo.
Bien sûr, si vous déplacez le point de contrôle très loin, les graphiques risquent de vous devenir inconnus. Essayons :
« y1 = 950
» J'ai juste changé y1 un peu plus grand, et puis la courbe est sortie du cadre du canevas.

Cependant, la plage de la courbe dessinée par quadraticCurveTo ne peut jamais atteindre ou dépasser les coordonnées des points de contrôle. Tant que nous « contrôlons » les points de contrôle, nous n'avons pas à nous inquiéter.
J'ai écrit une page d'exemple mobile simple pour montrer le processus de dessin de courbes avec quadraticCurveTo. J'espère que cela pourra vous aider à approfondir votre compréhension :

.
<!DOCTYPE HTML>
<html lang="en-US">
<tête>
 <meta charset="UTF-8">
 <title>Apprentissage sur toile --quadraticCurvePour dessiner une courbe</title>
 <style type="text/css">
 toile {box-shadow : 0 0 10px rgba(0,0,0,0.2) }
 </style>
≪/tête>
<corps>
 <canvas id="cvs" width="800" height="600">le canevas n'est pas pris en charge</canvas>
</corps>
<script type="text/javascript">
var cvs = document.getElementById('cvs'); //canvas
var ctx = cvs.getContext('2d'); // pinceau
//ctx.closePath();
variable x1=350,
 y1 = 250,
 x2 = 440,
 y2 = 550,
 x = 400,
 y = 500 ;
var ventilateur = 1, ventilateur1 = 1 ;
fonction dessiner () {
 ctx.clearRect(100 100 600 600);
 ctx.beginPath();
 ctx.StrokeStyle="#000";
 ctx.moveTo(300 300);
 ctx.quadraticCurveTo(x1,y1,x,y);
 ctx.AVC();
 /*ctx.beginPath();
 ctx.StrokeStyle = "rgba(0,255,0,1)"
 ctx.moveTo(300 300);
 ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
 ctx.AVC();*/
 ctx.beginPath();
 ctx.StrokeStyle = "rgba(255,0,0,0.5)";
 ctx.moveTo(300 300);
 ctx.lineTo(x1,y1);
 //ctx.lineTo(x2,y2);
 ctx.lineTo(x,y);
 ctx.moveTo(300 300);
 ctx.lineTo(x,y);
 /*ctx.moveTo(x2,y2);
 ctx.lineTo(x,y);*/
 ctx.AVC();
 si (x1 > 600) {
  ventilateur = -1 ;
 } sinon si (x1 < 200) {
  ventilateur = 1 ;
 }
 si (y1 > 700) {
  ventilateur1 = -1 ;
 } sinon si (y1 < 200) {
  ventilateur1 = 1 ;
 }
 x1 = ventilateur ;
 y1 = ventilateur1 ;
 setTimeout(dessiner,22);
}
dessiner();
//ctx.StrokeRect(100,100,50,50);
</script>
</html>

Astuce : Vous pouvez modifier une partie du code avant d'exécuter
Veuillez me pardonner si le code est moche.