Canvas chiziqli gradienti
HTML Canvas gradientlari
Gradientlar ikki yoki undan ortiq belgilangan ranglar orasidagi silliq o‘tishlarni ko‘rsatish imkonini beradi.
Gradientlardan to‘rtburchaklar, aylanalar, chiziqlar, matn va hokazolarni to‘ldirish uchun foydalanish mumkin.
Gradient yaratish uchun ikkita metod ishlatiladi:
createLinearGradient()- chiziqli gradient yaratadicreateRadialGradient()- radial/aylanma gradient yaratadi
createLinearGradient() metodi
createLinearGradient() metodi chiziqli gradientni belgilash uchun ishlatiladi.
Chiziqli gradient rangni chiziqli yo‘nalish bo‘ylab (gorizontal/vertikal/diagonal) o‘zgartiradi.
createLinearGradient() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x0 | Majburiy. Boshlang‘ich nuqtaning x koordinatasi |
| y0 | Majburiy. Boshlang‘ich nuqtaning y koordinatasi |
| x1 | Majburiy. Oxirgi nuqtaning x koordinatasi |
| y1 | Majburiy. Oxirgi nuqtaning y koordinatasi |
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 chiziqli gradient yarating: gradientning boshlang‘ich nuqtasida och ko‘k rang, oxirgi nuqtasida esa to‘q ko‘k rang. So‘ngra to‘rtburchakni shu gradient bilan to‘ldiring:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,0);
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 konturli to‘rtburchakni gradient bilan to‘ldiramiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill outlined rectangle with gradient
ctx.lineWidth = 10;
ctx.strokeStyle = grad;
ctx.strokeRect(10,10,280,130);
</script>
O‘zingiz sinab ko‘ring »
Misol
Uchta rang to‘xtash nuqtasiga ega chiziqli gradient yarating: gradientning boshlang‘ich nuqtasida och ko‘k rang, o‘rta nuqtasida binafsha rang, oxirgi nuqtasida esa to‘q ko‘k rang. So‘ngra to‘rtburchakni shu gradient bilan to‘ldiring:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(0.5, "purple");
grad.addColorStop(1, "darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
O‘zingiz sinab ko‘ring »
Vertikal chiziqli gradient
Gorizontal gradient chapdan o‘ngga yo‘naladi va x o‘qidagi parametrlarni (x1 va x2) o‘zgartirish orqali yaratiladi. Yuqoridagi misollarning barchasi gorizontal chiziqli gradientlardir.
Vertikal gradient yuqoridan pastga yo‘naladi va y o‘qidagi parametrlarni (y1 va y2) o‘zgartirish orqali yaratiladi.
Misol
y o‘qidagi parametr qiymatlarini o‘zgartirib (y2 ni o‘zgartiring), vertikal chiziqli gradient yarating:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 0,130);
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 »
Diagonal chiziqli gradient
Diagonal gradient x va y o‘qlaridagi parametrlarning ikkalasini ham o‘zgartirish orqali yaratiladi.
Misol
x va y o‘qlaridagi parametrlarning ikkalasini ham o‘zgartirib (x2 va y2 ni o‘zgartiring), diagonal chiziqli gradient yarating:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,130);
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 »
Aylanani gradient bilan to‘ldirish
Misol
Bu yerda aylanani gradient bilan to‘ldiramiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill circle with gradient
ctx.beginPath();
ctx.arc(145, 75, 65, 0, 2 * Math.PI);
ctx.fillStyle = grad;
ctx.fill();
</script>
O‘zingiz sinab ko‘ring »
Matnni gradient bilan to‘ldirish
Misol
Bu yerda matnni gradient bilan to‘ldiramiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill text with gradient
ctx.font = "50px Arial";
ctx.fillStyle = grad;
ctx.fillText("Hello World",10,80);
</script>
O‘zingiz sinab ko‘ring »
Konturli matnni gradient bilan to‘ldirish
Misol
Bu yerda konturli matnni gradient bilan to‘ldiramiz:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill outlined text with gradient
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!