Hvordan Tegn kurver med Javascript

Innføringen av HTML5 brakte med seg støtte for "lerret" element, som lar utviklere å lage dynamiske 2D-former og punktgrafikkbilder i standard HTML-sider ved hjelp av Javascript. Spesielt dette nye elementet støtter kurver i form av sirkel buer. For å lage en slik form, må du først definere et lerret element, trekker sine egenskaper i Javascript, og deretter sette opp disse egenskapene buen nødvendige for kurven for å vise slik du vil at det skal.

Bruksanvisning

1 Opprett et lerret mellom sidens "body" koder og tilordne det et ID:

<Canvas id = "lerret-eksempel"> </ canvas>

2 Opprett en Javascript-funksjon mellom "hodet" tags på siden din som laster ved oppstart:

<Script type = "text / javascript">
window.onload = function ()
{
};
</ Script>

3 Initial lerretet ved hjelp av "getElementById" og "getContext" metoder, samt to variabler:

Var my_canvas = document.getElementById ( "lerret-eksempel");
Var my_canvas_content = my_canvas.getContext ( "2d");

4 Erklærer fem variabler og tilordne dem verdier basert på midt x og y koordinatene til sirkel, sirkelens radius, kurvens startvinkel og kurvens avslutning 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 Lag kurven banen ved å sette variabler deklarert inn i "buen" metoden:

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

6 Tildele kurven en bredde og farge ved hjelp av "linjebredde" og "strokeStyle" egenskaper:

my_canvas_content.lineWidth = 15;
my_canvas_content.strokeStyle = "black"

7 Tegn kurven ved å bruke "slag" metoden:

my_canvas_content.stroke ();