Die Einführung von HTML5 mit sich brachte für die " Leinwand " , welches es Entwicklern, dynamische 2D-Formen und Bitmap-Bildern in Standard-HTML- Seiten mit JavaScript erstellen können unterstützen. Insbesondere unterstützt dieses neue Element Kurven in der Form von Kreisbögen . Um eine solche Form zu erstellen , müssen Sie zunächst ein Canvas-Element , ziehen seine Eigenschaften in JavaScript und richten Sie dann die Eigenschaften des Lichtbogens , die für die Kurve, um die , wie Sie es möchten anzuzeigen. Anleitung
1

erstellen Leinwand zwischen der Seite "body "-Tags und weisen Sie ihm eine ID:

2

erstellen Sie eine JavaScript -Funktion zwischen den "Kopf" -Tags Ihrer Seite , dass die Ladung beim Start :

3

initialisieren die Leinwand mit dem " getElementById " und " getContext " Methoden , sowie zwei Variablen :

var my_canvas = document.getElementById (" Leinwand - Beispiel "); var my_canvas_content = my_canvas.getContext ( " 2d ");
4

Declare fünf Variablen und weisen sie Werte in der Mitte x und y-Koordinaten des Kreises , den Radius des Kreises , der Kurve Startwinkel und der Kurve Endwinkel bezogen :

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

erstellen Sie den Kurvenverlauf durch Einsetzen der deklarierten Variablen in die "arc" -Methode:

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

zuweisen der Kurve eine Breite und Farbe mit dem " lineWidth " und " strokeStyle " Eigenschaften :

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

zeichnen Sie die Kurve mit der " Hub "-Methode :

my_canvas_content.stroke ();