Mfano wa Canvas wa DOM wa HTML

Elementi ya <canvas> inadefini eneo la bitmap kwenye ukurasa wa HTML.

API ya Canvas inafaa kwa JavaScript kuandika muundo kwenye kijani.

API ya Canvas inasababisha kuandika muundo, mabomu, mafupi, mabara, matukio na picha, pamoja na rangi, mchekako, viwango vya mafanikio na matukio ya pixel.

Kuingiza Canvas katika HTML

Inaukoma kufikia elementi ya <canvas> kwa kutumia tag ya <canvas> kwenye eneo yoyote ya ukurasa wa HTML:

Msingi

<canvas id="myCanvas" width="300" height="150"></canvas>

Kufia tena kufia

Jinsi ya kufikia elementi ya Canvas

Inaukoma kwa kufikia elementi ya <canvas> kwa sababu ya HTML DOM kwa kutumia method ya getElementById():

const myCanvas = document.getElementById("myCanvas");

Kusitishwa uandiko katika msingi, inahitajika kwamba unatoa kiwango cha kiwango cha 2D:

const ctx = myCanvas.getContext("2d");

Kipendeni

Kiwango cha <canvas> cha HTML kina ukubwa wa kufanya uandiko.

Inahitajika kwamba uandiko wa kila rangi kusitishwe kwa JavaScript.

Method ya getContext() inatoa kiwango cha kifunzi cha uandiko (madarasa).

Kufanya uandiko katika msingi

Kufikia kuanza kiwango cha 2D, unaweza kufanya uandiko katika msingi.

Makutano ya fillRect() ya hizi yanatoa msingi wa kawaida kwa rangi ya mabaya, kinasitishwa katika eneo la 20,20. Msingi huo una umbo 150 kati na umbo 100 kati.

Msingi

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Kufia tena kufia

Tumia rangi

Majibu ya fillStyle kinaingiza rangi ya muonekano wa kiwango kwa kiumbezi.

Msingi

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Kufia tena kufia

Unaweza kutumia method ya document.createElement() kukuza kipengele kipya cha <canvas> kwa ukurasa wa HTML wa hivi karibuni:

Msingi

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Kufia tena kufia

路径

Mwenzako wa uandiko katika msingi ni:

1. Kuanza msingi - beginPath()
2. Kusafirisha katika nchi - moveTo()
3. Kichwa cha njia ya uandiko katika msingi - lineTo()
4. Kichwa cha njia ya uandiko - stroke()

Msingi

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Kufia tena kufia