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ā:
<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();
:
Piemērs
Uzzīmēsim kvadrātu, izmantojot rect
un nokrāsosim to zaļā krāsā:
<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();
:
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.
