Canvas matn rangi
HTML Canvas matn rangi
Canvas’dagi matn rangini o‘rnatish uchun ikkita xususiyatdan foydalanamiz:
fillStyle- matn uchun to‘ldirish rangini belgilaydistrokeStyle- konturli matn rangini belgilaydi
fillStyle xususiyati
fillStyle xususiyati matnning to‘ldirish rangini belgilaydi.
Misol
Shriftni 50px "Arial" qilib o‘rnating. To‘ldirish rangini binafsha qilib o‘rnating. Canvas’ga to‘ldirilgan matn yozing. (10,80) pozitsiyadan boshlang:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,80);
</script>
O‘zingiz sinab ko‘ring »
strokeStyle xususiyati
strokeStyle xususiyati matn konturining rangini belgilaydi.
Misol
Shriftni 50px "Arial" qilib o‘rnating. Kontur rangini binafsha qilib o‘rnating. Canvas’ga konturli matn yozing. (10,80) pozitsiyadan boshlang:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,80);
</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!