Змена колеру лініі ў canvas на JavaScript
Давайце цяпер навучымся мяняць колер кантуру
і заліўкі. Для гэтага ёсць наступныя ўласцівасці:
уласцівасць strokeStyle устанаўлівае
колер кантуру, а ўласцівасць fillStyle
- колер заліўкі. Колеры ўстанаўліваюцца ў звычайным
CSS
фармаце.
Прыклад
Давайце нарысуем кантур з дапамогай rect
і афарбуем яго ў чырвоны колер:
<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();
:
Прыклад
Давайце нарысуем квадрацік з дапамогай rect
і афарбуем яго ў зялёны колер:
<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();
:
Заўвага
Важна: калі вы ўстанаўліваеце strokeStyle
ці fillStyle, новае значэнне будзе ўжыта
для ўсіх фігур, якія будуць намаляваны
з гэтага моманту. Для кожнай фігуры, для якой
вам патрэбны іншы колер, вы павінны перазапісаць
значэнне fillStyle ці strokeStyle.
