Die getContext-metode

Die metode getContext stel die konteks vir teken vas voordat met die kanvas gewerk word. In die eerste parameter van die metode spesifiseer ons die tipe konteks - '2d' of '3d', en in die tweede - sy eienskappe.

Sintaksis

canvas.getContext(konteks tipe, eienskappe);

Voorbeeld

Kom ons maak 'n doek met getContext en stel 'n deursigtige agtergrond vir dit deur middel van die eienskap alpha, wat aan die blaaier die teenwoordigheid van 'n alfakanaal aandui:

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

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

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

Voorbeeld

En nou, laat ons 'n ondeursigtige agtergrond maak:

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

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

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