ფერის შეცვლა ხაზისა 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-ს.

პრაქტიკული ამოცანები