Kubadilisha Rangi ya Mstari katika Canvas kwa JavaScript
Hebu sasa tujifunze jinsi ya kubadilisha rangi ya mstari
na kujaza. Kwa hili kuna sifa zifuatazo:
sifa strokeStyle huweka
rangi ya mstari, na sifa fillStyle
- rangi ya kujaza. Rangi huwekwa kwa
Umbo la kawaida la CSS.
Mfano
Hebu tuchore mstari kwa kutumia rect
na tupake rangi nyekundu:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
Mfano
Hebu tuchore mraba kwa kutumia rect
na tujaze kwa rangi ya kijani:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
Uzingatio
Muhimu: unapoweka strokeStyle
au fillStyle, thamani mpya itatumika
kwa maumbo yote yatakayochorwa
kutoka wakati huu. Kwa kila umbo, ambalo
unahitaji rangi tofauti, lazima uandike upya
thamani ya fillStyle au strokeStyle.
