Līnijas krāsas maiņa canvas uz JavaScript

Tagad iemācīsimies mainīt kontūra un aizpildījuma krāsu. Šim nolūkam ir šādas īpašības: īpašība strokeStyle nosaka kontūra krāsu, bet īpašība fillStyle - aizpildījuma krāsu. Krāsas tiek noteiktas parastā CSS formātā.

Piemērs

Uzzīmēsim kontūru, izmantojot rect un nokrāsosim to sarkanā krāsā:

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();

Результат:

Piemērs

Uzzīmēsim kvadrātu, izmantojot rect un nokrāsosim to zaļā krāsā:

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();

Результат:

Piezīme

Svarīgi: kad iestatāt strokeStyle vai fillStyle, jaunā vērtība tiks piemērota visām figūrām, kuras tiks uzzīmētas no šī brīža. Katrai figūrai, kurai vajag citu krāsu, jums ir jāpārraksta fillStyle vai strokeStyle vērtība.

Praktiskie uzdevumi