Πώς να Ισοπαλία Curves Με Javascript

Η εισαγωγή του HTML5 έφερε μαζί του την υποστήριξή της για την " καμβά " στοιχείο, το οποίο επιτρέπει στους προγραμματιστές να δημιουργήσουν δυναμική 2D σχήματα και εικόνες bitmap σε τυπικές σελίδες HTML με τη χρήση JavaScript . Ειδικότερα , αυτό το νέο στοιχείο υποστηρίζει καμπύλες υπό μορφή τόξων κύκλου. Για να δημιουργήσετε ένα τέτοιο σχήμα , πρέπει πρώτα να ορίσετε ένα στοιχείο καμβά , τραβήξτε τις ιδιότητές του σε JavaScript και στη συνέχεια να δημιουργήσει εκείνες τις ιδιότητες του τόξου που είναι αναγκαία για την καμπύλη για να εμφανίσετε τον τρόπο που θα θέλατε να . Οδηγίες
Η 1

Δημιουργήστε έναν καμβά μεταξύ «σώμα» ετικέτες της σελίδας και να ορίσετε ένα ID :

2

Δημιουργήστε μια λειτουργία JavaScript μεταξύ των " επικεφαλής " ετικέτες της σελίδας σας που φορτώνει κατά την εκκίνηση :

εικόνων
3

προετοιμαστεί τον καμβά χρησιμοποιώντας το " getElementById » και τις μεθόδους " getContext » , καθώς και δύο μεταβλητές :

var my_canvas = document.getElementById ( " καμβά - παράδειγμα ")? var my_canvas_content = my_canvas.getContext ( " 2d ")?
Η 4

αναγνωρίσει πέντε μεταβλητές και να τους εκχωρήσετε τιμές με βάση το κέντρο x και y συντεταγμένες του κύκλου , ακτίνα του κύκλου , αρχική γωνία της καμπύλης και η γωνία που έληξε της καμπύλης :

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

Δημιουργήστε το καμπύλη διαδρομή εισάγοντας τις μεταβλητές που δηλώνονται στη μέθοδο « τόξο» :

my_canvas_content . τόξου ( starting_x_coordinate , starting_y_coordinate , curve_radius , curve_starting_angle , curve_ending_angle ) ?
Η 6

Εκχώρηση της καμπύλης πλάτος και το χρώμα χρησιμοποιώντας το " lineWidth " και " strokeStyle " ιδιότητες :

my_canvas_content.lineWidth = 15 ? my_canvas_content.strokeStyle = " black "
Η 7

Σχεδιάστε την καμπύλη με τη μέθοδο της «εγκεφαλικό επεισόδιο» :

my_canvas_content.stroke ( ) ?


Η