Змена колеру лініі ў canvas на JavaScript

Давайце цяпер навучымся мяняць колер кантуру і заліўкі. Для гэтага ёсць наступныя ўласцівасці: уласцівасць strokeStyle устанаўлівае колер кантуру, а ўласцівасць fillStyle - колер заліўкі. Колеры ўстанаўліваюцца ў звычайным CSS фармаце.

Прыклад

Давайце нарысуем кантур з дапамогай rect і афарбуем яго ў чырвоны колер:

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

Результат:

Прыклад

Давайце нарысуем квадрацік з дапамогай rect і афарбуем яго ў зялёны колер:

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

Результат:

Заўвага

Важна: калі вы ўстанаўліваеце strokeStyle ці fillStyle, новае значэнне будзе ўжыта для ўсіх фігур, якія будуць намаляваны з гэтага моманту. Для кожнай фігуры, для якой вам патрэбны іншы колер, вы павінны перазапісаць значэнне fillStyle ці strokeStyle.

Практычныя задачы