Μέθοδος bezierCurveTo() του HTML canvas
Ορισμός και χρήση
bezierCurveTo() μέθοδο προσθέτοντας έναν σημείο στο τρέχον δρόμο χρησιμοποιώντας τους καθορισμένους σημεία ελέγχου της τριγωνικής καμπύλης.
Σημείωση:Η τριγωνική καμπύληBezier χρειάζεται τρία σημεία. Οι δύο πρώτοι είναι σημεία ελέγχου για τον υπολογισμό της τριγωνικής καμπύλης, το τρίτο σημείο είναι το τέλος της καμπύλης. Το σημείο άρχισμα της καμπύλης είναι ο τελευταίος σημείο του διαδρόμου. Αν ο δρόμος δεν υπάρχει, χρησιμοποιήστε beginPath() και moveTo() μεθόδους για να καθορίσετε το σημείο άρχισμα.
- Άρχισμα σημείο: moveTo(
20,20) - Σημείο ελέγχου 1: bezierCurveTo(
20,100,200,100,200,20) - Σημείο ελέγχου 2: bezierCurveTo(20,100,
200,100,200,20) - Τελικό σημείο: bezierCurveTo(20,100,200,100,
200,20)
Σημείωση:Δείτε επίσης Μέθοδος quadraticCurveTo()。Έχει έναν σημείο ελέγχου, όχι δύο.
Παράδειγμα
Διαγράψτε μια τριγωνική καμπύληBezier:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Γλώσσα
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Παράμετρος τιμή
| Παράμετροι | Περιγραφή |
|---|---|
| cp1x | Η x κόординά του πρώτου σημείου ελέγχου 贝塞尔. |
| cp1y | Η y κόординά του πρώτου σημείου ελέγχου 贝塞尔. |
| cp2x | Η x κόординά του δεύτερου σημείου ελέγχου 贝塞尔. |
| cp2y | Η y κόординά του δεύτερου σημείου ελέγχου 贝塞尔. |
| x | Η x κόординά του σημείου λήξης. |
| y | Η y κόординά του σημείου λήξης. |
Υποστήριξη浏览器
Οι αριθμοί στην τаблицή αναφέρουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτήν την ιδιότητα πλήρως.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:Ο Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.
