createLinearGradient()
Canvas createLinearGradient() metodi
Misol
To‘rtburchak uchun to‘ldirish uslubi sifatida qoradan oqqa o‘tuvchi gradient (chapdan o‘ngga) belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a Gradient
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Tavsif
createLinearGradient() metodi chiziqli 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:
createRadialGradient() 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.createLinearGradient(x0, y0, x1, y1) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| x0 | Gradient boshlang‘ich nuqtasining x koordinatasi | Sinab ko‘rish » |
| y0 | Gradient boshlang‘ich nuqtasining y koordinatasi | |
| x1 | Gradient oxirgi nuqtasining x koordinatasi | |
| y1 | Gradient oxirgi nuqtasining y koordinatasi |
Qaytariladigan qiymat
| Tip | Tavsif |
|---|---|
| Object | Chiziqli gradient obyekti |
Ko‘proq misollar
Misol
To‘rtburchak uchun to‘ldirish uslubi sifatida gradient (yuqoridan pastga) belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Gradient
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
// Fill Rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Misol
To‘rtburchak uchun to‘ldirish uslubi sifatida qoradan qizilga, so‘ng oqqa o‘tuvchi gradient belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Gradient
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
// Fill Rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
createLinearGradient() 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!