Canvas soyalari
HTML Canvas soyalari
Canvas’da soya yaratish uchun quyidagi to‘rtta xususiyatdan foydalanamiz:
shadowColor- soya rangini belgilaydishadowBlur- soyaning xiralik darajasini belgilaydishadowOffsetX- soyalar gorizontal bo‘yicha qancha masofaga siljishini belgilaydishadowOffsetY- soyalar vertikal bo‘yicha qancha masofaga siljishini belgilaydi
shadowColor xususiyati
shadowColor xususiyati soya rangini belgilaydi.
Standart qiymat — to‘liq shaffof qora rang.
Misol
Bu yerda och ko‘k soyali to‘ldirilgan ko‘k to‘rtburchak va och ko‘k soyali konturli ko‘k to‘rtburchak yaratamiz:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
// Filled rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda och ko‘k soyali to‘ldirilgan binafsha matn va och ko‘k soyali konturli binafsha matn yaratamiz:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.font = "50px Arial";
// Filled text
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,60);
// Stroked text
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
O‘zingiz sinab ko‘ring »
shadowBlur xususiyati
shadowBlur xususiyati soyaga qo‘llaniladigan xiralik miqdorini belgilaydi.
Standart qiymat — 0 (xiralik yo‘q).
Misol
shadowBlur xususiyati 8 ga o‘rnatilgan to‘ldirilgan va konturli to‘rtburchaklar:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
// Filled rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
Misol
shadowBlur xususiyati 4 ga o‘rnatilgan to‘ldirilgan va konturli matn:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.font = "50px Arial";
// Filled text
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,60);
// Stroked text
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
O‘zingiz sinab ko‘ring »
shadowOffsetX xususiyati
shadowOffsetX xususiyati soyaning shakldan gorizontal masofasini belgilaydi.
Musbat qiymatlar soyani o‘ngga, manfiy qiymatlar esa chapga siljitadi.
Standart qiymat — 0 (gorizontal siljish yo‘q).
Misol
Birinchi to‘rtburchak shadowOffsetX = 5 bilan, ikkinchi to‘rtburchak shadowOffsetX = 15 bilan, uchinchi to‘rtburchak shadowOffsetX = -10 bilan:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadowcolor
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
// rectangle 1
ctx.shadowOffsetX = 5;
ctx.fillRect(20, 20, 100, 100);
// rectangle 2
ctx.shadowOffsetX = 15;
ctx.fillRect(170, 20, 100, 100);
// rectangle 3
ctx.shadowOffsetX = -10;
ctx.fillRect(320, 20, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
shadowOffsetY xususiyati
shadowOffsetY xususiyati soyaning shakldan vertikal masofasini belgilaydi.
Musbat qiymatlar soyani pastga, manfiy qiymatlar esa yuqoriga siljitadi.
Standart qiymat — 0 (vertikal siljish yo‘q).
Misol
Birinchi to‘rtburchak shadowOffsetY = 5 bilan, ikkinchi to‘rtburchak shadowOffsetY = 15 bilan, uchinchi to‘rtburchak shadowOffsetY = -10 bilan:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadowcolor
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
// rectangle 1
ctx.shadowOffsetY = 5;
ctx.fillRect(20, 20, 100, 100);
// rectangle 2
ctx.shadowOffsetY = 15;
ctx.fillRect(170, 20, 100, 100);
// rectangle 3
ctx.shadowOffsetY = -10;
ctx.fillRect(320, 20, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!