createRadialGradient()
Canvas createRadialGradient() metodi
Misol
Radial/aylanma gradient bilan to‘ldirilgan to‘rtburchak chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Radial
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100);
O‘zingiz sinab ko‘ring »
Tavsif
createRadialGradient() metodi radial/aylanma gradient obyektini yaratadi.
Gradient obyektidan to‘rtburchaklar, aylanalar, chiziqlar, matn va hokazolarni to‘ldirish uchun foydalanish mumkin.
Gradient obyektidan strokeStyle yoki fillStyle xususiyatlarining qiymati sifatida foydalanish mumkin.
Eslatma
Gradient ko‘rinadigan bo‘lishi uchun gradient obyektiga rang to‘xtash nuqtasini qo‘shishingiz kerak.
Shuningdek qarang:
createLinearGradient() metodi (gradient obyektini yaratish)
addColorStop() metodi (gradient to‘xtash nuqtasini qo‘shish)
fillStyle xususiyati (to‘ldirish rangi/uslubini o‘rnatish)
strokeStyle xususiyati (chiziq rangi/uslubini o‘rnatish)
Sintaksis
| context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
Parametr qiymatlari
| Parametr | Tavsif |
|---|---|
| x0 | Gradient boshlang‘ich aylanasining x koordinatasi |
| y0 | Gradient boshlang‘ich aylanasining y koordinatasi |
| r0 | Boshlang‘ich aylananing radiusi |
| x1 | Gradient oxirgi aylanasining x koordinatasi |
| y1 | Gradient oxirgi aylanasining y koordinatasi |
| r1 | Oxirgi aylananing radiusi |
Qaytariladigan qiymat
| context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
createRadialGradient() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!