Canvas radial gradienti
createRadialGradient() metodi
createRadialGradient() metodi radial/aylanma gradientni belgilash uchun ishlatiladi.
Radial gradient ikkita xayoliy aylana bilan belgilanadi: boshlang‘ich aylana va oxirgi aylana. Gradient boshlang‘ich aylanadan boshlanib, oxirgi aylana tomon harakatlanadi.
createRadialGradient() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x0 | Majburiy. Boshlang‘ich aylananing x koordinatasi |
| y0 | Majburiy. Boshlang‘ich aylananing y koordinatasi |
| r0 | Majburiy. Boshlang‘ich aylananing radiusi |
| x1 | Majburiy. Oxirgi aylananing x koordinatasi |
| y1 | Majburiy. Oxirgi aylananing y koordinatasi |
| r1 | Majburiy. Oxirgi aylananing radiusi |
Gradient obyekti ikki yoki undan ortiq rang to‘xtash nuqtasini (color stop) talab qiladi.
addColorStop() metodi rang to‘xtash nuqtalarini va ularning gradient bo‘ylab pozitsiyasini belgilaydi. Pozitsiyalar 0 va 1 oralig‘idagi istalgan qiymat bo‘lishi mumkin.
Gradientdan foydalanish uchun uni fillStyle yoki
strokeStyle xususiyatiga tayinlang, so‘ngra shaklni (to‘rtburchak, aylana, shakl yoki matn) chizing.
Misol
Ikkita rang to‘xtash nuqtasiga ega radial/aylanma gradient yarating: gradientning boshlang‘ich aylanasi uchun och ko‘k rang, oxirgi aylanasi uchun esa to‘q ko‘k rang. Boshlang‘ich aylananing markazi (150,75) pozitsiyada joylashgan, radiusi 15 px. Oxirgi aylananing markazi (150,75) pozitsiyada joylashgan, radiusi 150 px. So‘ngra to‘rtburchakni shu gradient bilan to‘ldiring:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda oxirgi aylananing radiusini kichikroq songa (100) o‘rnatamiz va radial/aylanma gradient kichikroq bo‘lishini ko‘ramiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda yangi ko‘rinish hosil qilish uchun oxirgi aylananing markaziy nuqtasini ko‘chiramiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,180,95,100);
grad.addColorStop(0,"lightblue");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda yangi ko‘rinish hosil qilish uchun gradientga yana bitta rang to‘xtash nuqtasini qo‘shamiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grad=ctx.createRadialGradient(150,75,15,150,75,150);
grad.addColorStop(0,"lightblue");
grad.addColorStop(0.3,"pink");
grad.addColorStop(1,"darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10,280,130);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!