Notes d'étude sur toile : tracer des chemins simples

Étapes générales pour dessiner des segments de ligne :

moveTo(x,y) déplace le pinceau vers le point de coordonnées spécifié (x,y)

lineTo(x,y) utilise une ligne droite pour connecter le point final actuel et le point de coordonnées spécifié (x,y)

Stroke() dessine le chemin actuel ou existant en fonction du style de dessin de ligne actuel

Étapes générales pour tracer un chemin rectangulaire :

rect(x, y, width, height) chemin rectangulaire, point de coordonnées (x, y), largeur hauteur

Stroke() ou fill dessine ou remplit le chemin selon le style actuel

Vous pouvez également utiliser le StrokeRect ou le fillRect mentionné ci-dessus, ou le découper en un rectangle via lineTo.

Examinons d'abord l'API pour dessiner des arcs :

ctx.arc(x, y, rayon, startAngle, endAngle, dans le sens inverse des aiguilles d'une montre) ;

Centre de l'arc x, y, rayon du rayon de l'arc, point de départ de l'angle de départ, point final de l'arc de l'angle de fin, dans le sens inverse des aiguilles d'une montre par défaut dans le sens des aiguilles d'une montre, vrai dans le sens inverse des aiguilles d'une montre.

Toutes les rotations en CSS utilisent des angles (deg), mais l'unité utilisée pour exprimer les angles dans la fonction arc est le radian et non l'angle. Expressions JS des angles et des radians : radians = (Math.PI/180) * angle (deg).

Le radian ici est calculé par défaut en fonction de la direction positive de l'axe des x et de l'angle de rotation dans le sens des aiguilles d'une montre.

Illustration:

(photo du désert)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.stroke();ctx.fill();

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.