addColorStop()
Canvas addColorStop() metodi
Misol
Qoradan oqqa o‘tuvchi gradient belgilang va u bilan to‘rtburchakni to‘ldiring:
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
addColorStop() metodi gradient obyektidagi rang va pozitsiyani belgilaydi.
addColorStop() metodi chiziqli gradient obyektlari va radial gradient obyektlari bilan birgalikda ishlatiladi.
Eslatma
Gradient ko‘rinadigan bo‘lishi uchun gradient obyektiga rang to‘xtash nuqtasini (color stop) qo‘shishingiz kerak.
Shuningdek qarang:
createLinearGradient() metodi (Gradient obyektini yaratish)
createRadialGradient() metodi (Gradient obyektini yaratish)
fillStyle xususiyati (To‘ldirish rangi/uslubini o‘rnatish)
strokeStyle xususiyati (Chiziq rangi/uslubini o‘rnatish)
Sintaksis
| gradient.addColorStop(stop, color) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| stop | 0 va 1 orasidagi qiymat. Gradientning boshi va oxiri orasidagi pozitsiya | Sinab ko‘rish » |
| color | stop pozitsiyasida ko‘rsatiladigan CSS rang qiymati | Sinab ko‘rish » |
Qaytariladigan qiymat
| Yo‘q |
Ko‘proq misollar
Misol
Bir nechta addColorStop() metodi yordamida gradient belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop("0.3", "magenta");
grd.addColorStop("0.5", "blue");
grd.addColorStop("0.6", "green");
grd.addColorStop("0.8", "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
addColorStop() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!