Créer un triangle équilatéral au milieu de la toile?
Je veux dessiner un triangle équilatéral au milieu de la toile. J'ai essayé ceci:
ctx.moveTo(canvas.width/2, canvas.height/2-50); ctx.lineTo(canvas.width/2-50, canvas.height/2+50); ctx.lineTo(canvas.width/2+50, canvas.height/2+50); ctx.fill(); Mais le triangle semble un peu trop grand.
Comment puis-je dessiner un triangle équilatéral au milieu de la toile?
Quelqu'un m'a dit que vous deviez trouver le rapport de la hauteur d'un triangle équilatéral sur le côté d'un triangle équilatéral.
- Calculer le milieu de coordonnées de latitude et de longitude
- Comment peut-on faire tourner un chemin d'animation elliptique d'une certaine quantité de degrés?
- Comment puis-je animer des étapes intermédiaires pour un algorithme de coque convexe?
- ThreeJS – ExtrudeGeometry depth donne un résultat différent de extrudePath
- Pourquoi Math.cos (90 * Math.PI / 180) produit 6.123031769111 … et pas zéro?
h:s
Quels sont les deux nombres?
- Comment implémenter un solveur de contraintes pour la géométrie 2-D?
- Comment calculer l'angle de rotation à partir des points rectangulaires?
- Comment contraindre le mouvement dans la zone d'un cercle
- Une fonction JavaScript qui renvoie les points x, y d'intersection entre deux cercles?
- Emballage de cercles de différentes tailles en rectangle – d3.js
Vous devez le faire avec la hauteur du triangle
var h = side * (Math.sqrt(3)/2);
ou
var h = side * Math.cos(Math.PI/6);
Donc, le rapport h:s est égal à:
sqrt( 3 ) / 2 : 1 = cos( π / 6 ) : 1 ≈ 0.866025
L'équation pour les trois points d'angle est
x = r*cos(angle) + x_center y = r*sin(angle) + y_center
Où pour l'angle = 0, (1./3)*(2*pi), et (2./3)*(2*pi); Et où r est le rayon du cercle dans lequel le triangle est inscrit.
Une version simple où X et Y sont les points que vous voulez en haut du triangle:
var height = 100 * (Math.sqrt(3)/2); context.beginPath(); context.moveTo(X, Y); context.lineTo(X+50, Y+height); context.lineTo(X-50, Y+height); context.lineTo(X, Y); context.fill(); context.closePath();
Cela crée un triangle équilatéral avec tous les côtés = 100. Remplacez 100 par combien de temps vous voulez que vos longueurs latérales soient.
Après avoir trouvé le point médian de la toile, si vous voulez que ce soit le point médian de votre triangle, vous pouvez définir X = X du point médian et Y = Y-50 du point médian (pour un triangle de 100 longueurs).
Les longueurs latérales ne seront pas égales à ces coordonnées.
La ligne horizontale construite en bas a une longueur de 100, mais les autres côtés sont en fait l'hypoténuse d'un triangle 50×100 (environ 112).
Je peux vous aider à créer un triangle équilatéral, mais je n'ai pas le temps de le centrer.
JsFiddle
var ax=0; var ay=0; var bx=0; var by=150; var dx=bx-ax var dy=by-ay; var dangle = Math.atan2(dy, dx) - Math.PI / 3; var sideDist = Math.sqrt(dx * dx + dy * dy); var cx = Math.cos(dangle) * sideDist + ax; var cy = Math.sin(dangle) * sideDist + ay; var canvas = document.getElementById('equ'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(bx,by); ctx.lineTo(cx,cy); ctx.fill();
Mon code pour le dessin du triangle également en fonction de la direction (pour les lignes). Le code est pour Raphael lib.
drawTriangle(x2 - x1, y2 - y1, x2, y2); function drawTriangle(dx, dy, midX, midY) { var diff = 0; var cos = 0.866; var sin = 0.500; var length = Math.sqrt(dx * dx + dy * dy) * 0.8; dx = 8 * (dx / length); dy = 8 * (dy / length); var pX1 = (midX + diff) - (dx * cos + dy * -sin); var pY1 = midY - (dx * sin + dy * cos); var pX2 = (midX + diff) - (dx * cos + dy * sin); var pY2 = midY - (dx * -sin + dy * cos); return [ "M", midX + diff, midY, "L", pX1, pY1, "L", pX2, pY2, "L", midX + diff, midY ].join(","); }