L'introduction de HTML5 a apporté avec elle en charge pour l'élément " toile " , qui permet aux développeurs de créer des formes en 2D dynamiques et des images bitmap dans les pages HTML standard à l'aide de JavaScript. En particulier, ce nouvel élément appuie courbes en forme d'arcs de cercle. Pour créer une telle forme, vous devez d'abord définir un élément canvas , tirez sur ses propriétés dans JavaScript et ensuite mettre en place les propriétés de l' arc nécessaire pour la courbe pour afficher la façon dont vous voulez qu'il soit . Instructions
1

Créer une toile entre les balises «corps» de la page et attribuez-lui un ID: Photos

< /canvas>
2

créer une fonction JavaScript entre les balises de votre page " head" que les charges sur le démarrage :

3

Initialisation de la toile en utilisant le " getElementById " et les méthodes " getContext " , ainsi que deux variables : Photos

var my_canvas = document.getElementById (" toile - exemple "); var my_canvas_content = my_canvas.getContext ( «2D» ) ;
4

déclarer cinq variables et leur assigner valeurs basées sur le centre coordonnées x et y du cercle, le rayon du cercle, l'angle de départ de la courbe et de fin de la courbe angle :

var starting_x_coordinate = 200; var starting_y_coordinate = 160; var curve_radius = 70; curve_starting_angle var = 1.0 * Math.PI ; var curve_ending_angle = 1,9 * Math.PI ;
5

Créez le chemin de la courbe en insérant les variables déclarées dans la méthode "arc ":

my_canvas_content . arc ( starting_x_coordinate , starting_y_coordinate , curve_radius , curve_starting_angle , curve_ending_angle ) ;
6

Attribuer la courbe d'une largeur et la couleur en utilisant le " lineWidth " et les propriétés " strokeStyle " :

my_canvas_content.lineWidth = 15; my_canvas_content.strokeStyle = " noir "
7

Tracer la courbe en utilisant la méthode "coup ":

my_canvas_content.stroke (); < br >