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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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.

Kazi za Vitendo