Indførelsen af ​​HTML5 bragte med sig støtte til " lærredet "-element , som gør det muligt for udviklere at skabe dynamiske 2D figurer og bitmapbilleder i standard HTML-sider ved hjælp af JavaScript. Navnlig støtter dette nye element kurver i form af cirkelbuer . At skabe en sådan en figur, skal du først definere et lærred element , træk dens egenskaber i JavaScript , og derefter oprette de egenskaber ved den bue nødvendigt for kurven for at vise den måde, du gerne ville have det . Instruktioner
1

Opret et lærred mellem sidens "organ " tags og tildele den et ID :

< /lærredet >
2

Opret en JavaScript-funktion mellem "hoved" -tags på din side , der indlæses ved opstart :

3

Initialiser lærredet ved hjælp af " getElementById " og " getContext " metoder , samt to variabler :

var my_canvas = document.getElementById ( " canvas- eksempel ") var my_canvas_content = my_canvas.getContext ( " 2d ")
4

Erklær fem variabler og tildele dem værdier baseret på centrum x og y-koordinaterne for cirklen , cirklens radius , kurvens start vinkel og kurvens slutter vinkel :

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

Opret kurvebanen ved at indsætte de erklærede variabler i " arc "-metoden : Hej

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

Tildel kurven en bredde og farve ved hjælp af " lineWidth " og " strokeStyle " egenskaber : Hej

my_canvas_content.lineWidth = 15, my_canvas_content.strokeStyle = " black"
7

Tegn kurven ved at bruge " slagtilfælde" metoden : Hej

my_canvas_content.stroke (); < br >