მეთოდი getContext

მეთოდი getContext ადგენს ნახაზის კონტექსტს canvas-თან მუშაობის წინ. მეთოდის პირველ პარამეტრში ვიგულისხმებთ კონტექსტის ტიპი - '2d' ან '3d', ხოლო მეორეში - მისი ატრიბუტები.

სინტაქსი

javascriptcanvas.getContext(კონტექსტის ტიპი, ატრიბუტები);

მაგალითი

მოდით, შევქმნათ ტილო getContext-ის საშუალებით და მივანიჭოთ მას გამჭვირვალე ფონი ატრიბუტის alpha საშუალებით, რომელიც ბრაუზერს მიანიშნებს ალფა-არხის არსებობაზე:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptconst canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d', {alpha: true});

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'red';
ctx.fill();

Результат:

მაგალითი

ახლა კი მოდით, შევქმნათ გაუმჭვირვალე ფონი:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptconst canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d', {alpha: false});

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'red';
ctx.fill();

Результат: