Gradients in HTML Canvas

Canvas - Διανύσματα

Τα διανύσματα μπορούν να χρησιμοποιηθούν για να χρωματίσουν ορθογώνια, κύκλους, γραμμές, κείμενο κ.λπ. Οι μορφές στην καρτέλα δεν περιορίζονται σε απλά χρώματα.

Υπάρχουν δύο τύποι διανύσματα:

• createLinearGradient(x,y,x1,y1) - Δημιουργία γραμμικού διανύσματος
• createRadialGradient(x,y,r,x1,y1,r1) - Δημιουργία παραδραστικής/κυκλικής διανύσματος

Μόλις έχουμε το αντικείμενο διανύσματος, πρέπει να προσθέσουμε δύο ή περισσότερους σημεία χρώματος.

Η μέθοδος addColorStop() καθορίζει το σημείο διακοπής του χρώματος και τη θέση του στο διανύσματα. Η θέση του διανύσματος μπορεί να είναι οποιαδήποτε τιμή μεταξύ 0 και 1.

Για να χρησιμοποιήσετε διανύσματα, ρυθμίστε την ιδιότητα fillStyle ή strokeStyle σε διανύσματα και κατόπιν σχεδιάστε τη μορφή (όρθογωνίο, κείμενο ή γραμμή).

Χρήση createLinearGradient()

Παράδειγμα

Δημιουργία γραμμικού διανύσματος. Χρήση διανύσματος για να χρωματίσετε το ορθογώνιο:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Try it yourself

Χρήση createRadialGradient():

Παράδειγμα

Δημιουργία παραδραστικής/κυκλικής διανύσματος. Χρήση διανύσματος για να χρωματίσετε το ορθογώνιο:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Try it yourself

See also:

Complete Canvas Reference Manual of CodeW3C.com