Tutorial ng HTML Canvas

Ang HTML <canvas> elemento ay ginagamit upang magpipinta ng mga graphiko sa web page.

Ang graph na ito ay ginawa gamit ang <canvas>.

Ito ay nagpapakita ng apat na elemento: red rectangle, gradient rectangle, multicolored rectangle at multicolored text.

Ano ang HTML Canvas?

Ang elemento ng HTML <canvas> ay ginagamit para sa pagpipinta ng graph dinamikong pamamagitan ng script (karaniwan ay JavaScript).

Ang elemento ng <canvas> ay lamang ang container ng graph. Dapat gamitin mo ang script para magpipinta ng tunay na graph.

Mayroon palang mga paraan ang Canvas para sa pagpipinta ng path, box, circle, teksto at pagdagdag ng image.

Maaaring magpipinta ng teksto ang HTML Canvas

Maaaring magpipinta ng kulay na teksto ang Canvas, at maaaring may animated effect din.

Maaaring magpipinta ng graph ang HTML Canvas

Ang Canvas ay may malakas na kakayahang maggraphikahin at magpakita ng data sa pamamagitan ng graph at chart.

Ang HTML Canvas ay maaaring ginawang animated

Ang Canvas object ay maaaring ilihis. Lahat ng bagay ay posibleng: mula sa simple na bouncing ball hanggang sa malalim na animation.

Ang HTML Canvas ay maaaring mag-interact

Ang Canvas ay maaaring tumugon sa mga JavaScript event.

Ang Canvas ay maaaring tumugon sa anumang pagkilos ng user (click ng key, click ng mouse, click ng button, paggalaw ng finger).

Maaaring gamitin ang HTML Canvas para sa gaming

Ang mga animated na method ng Canvas ay nagbibigay ng maraming posibilidad sa mga HTML gaming application.

Halimbawa ng Canvas

Sa HTML, ang elemento ng <canvas> ay lumalabas tulad nito:

<canvas id="myCanvas" width="200" height="100"></canvas>

Ang elemento ng <canvas> ay dapat magkaroon ng id attribute para mapagamit ito ng JavaScript.

Ang width at height attribute ay kinakailangan para sa pagtatalaga ng laki ng kanvas.

Tipan: Ang isang HTML na pahina ay maaaring magkaroon ng maraming elemento ng <canvas>.

Sa kasalukuyan, ang elemento ng <canvas> ay walang border at walang nilalaman.

Kung gusto mong magdagdag ng border, gamitin ang style attribute:

Halimbawa

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Subukan nang personal

Ang mga susunod na kabanata ay maglalarawan kung paano magpipinta sa kanvas.

Bilang karagdagan, mangyaring tingnan:

Kompleto na Reference Manual ng Canvas sa CodeW3C.com

Suporta ng Browser

<canvas> ay isang elemento ng HTML5 standard (2014).

Lahat ng modernong browser ay sumusuporta sa <canvas>：