11521 sujets

JavaScript, DOM et API Web HTML5

Tuto (gratuit) Javascript: Calculer un angle avec 3 points

Bonjour à tous,

Je viens de publier un nouveau tuto sur ma chaine Youtube (gratuite et sans publicités) en forme d'atelier, sur le calcul d'un angle avec Javascript lorsque l'on ne connait au départ que les coordonnées des points qui constituent un triangle.
Pratiquement, on va cliquer 3 fois dans une image et le code va calculer l'angle formé entre les deux droites créées.
On va utiliser un Canvas Html 5 pour charger une image et on cliquera dans cette image pour y afficher des points (des Divs en position absolute), ensuite le code Js va dessiner les droites, calculer l'angle et l'afficher.
On utilisera du Javascript pur, sans jQuery.
Au niveau théorique on partira des points et on calculera l’hypoténuse d'un triangle induit afin d'obtenir la mesure de chaque coté du triangle et ensuite on utilisera le théorème d'Al-Kashi pour calculer l'angle:
durée: 74mn, 8 vidéos.

Tuto javascript calculer un angle

J'attends vos retours avec impatience Smiley smile

upload/1606291179-40948-schema-calcul.jpg
Modifié par lionel_css3 (25 Nov 2020 - 09:13)
Bonjour,

joli tuto. belle réalisation.

j ai retiré bootstrap. à la place j ai ajouté au css : 


body{margin:0; padding: 0;}
.row{display: flex;}
#sidebar{padding-left: 20px;}
.btn-primary{
    padding: 10px; font-size: 11pt; 
    color: white; background-color: dodgerblue;
    border-radius: 8px; border: 0;
}


Pour l'affichage, pourquoi mettre 3 elements (#abc p span) alors qu'un seul id (id="result" par exemple) directement sur la span aurait suffit et dans le js on aurait : 


    const canvas         = document.getElementById("mon-canvas");
    const context        = canvas.getContext("2d");
    const btnStart       = document.querySelector('#start');
    const btnRestart     = document.querySelector('#restart');
    /* const spanABC  = document.querySelector('#abc p span'); */
    const spanABC        = document.querySelector('#result');


enfin, j ai redimensionné l'image (trop grande en hauteur sur mon ecran, provoque l apparition de l'ascenseur). je l'ai mise à 632x550 au lieu de 893x777.

Encore bravo pour la recherche, la réalisation, les tutos et le zip.
Modifié par alain_47 (30 Nov 2020 - 08:46)
alain_47 a écrit :
Bonjour,

joli tuto. belle réalisation.

j ai retiré bootstrap. à la place j ai ajouté au css :



Pour l'affichage, pourquoi mettre 3 elements (#abc p span) alors qu'un seul id (id="result" par exemple) directement sur la span aurait suffit et dans le js on aurait :


enfin, j ai redimensionné l'image (trop grande en hauteur sur mon ecran, provoque l apparition de l'ascenseur). je l'ai mise à 632x550 au lieu de 893x777.

Encore bravo pour la recherche, la réalisation, les tutos et le zip.


Merci pour le retour,

alors effectivement le html / css n'est pas optimisé, c'est plus un bac à sable qu'un projet fini, d'ailleurs je l'évoque un peu au début, je n'ai pas voulu reproduire le projet complet avec les radiographies, pour rester concentré sur la parte Javascript, après chacun peut extrapoler le principe dans ses propres projets, mais encore merci pour ton avis..
Sujet clos
Aller à