Tag ng HTML <canvas>

Paglilinaw at paggamit

<canvas> Ang tagapaglabas ay karaniwang inilalagay sa pamamagitan ng script (karaniwang JavaScript) upang talagang magpipinta ng grapiko sa real-time.

<canvas> Ang tagapaglabas ay mapanlikha, ito lamang ang kandado ng grapiko, kinakailangang gamitin ang script upang talagang magpipinta ng grapiko.

sa mga browser na hindi sumusuporta sa JavaScript at hindi sumusuporta sa <canvas> sa iyong browser, magpapakita ito ng <canvas> Anumang teksto sa loob ng elemento.

Paalala

Matututuhan mo ang tungkol sa HTML Canvas sa aming tutorial sa <canvas> kaalaman tungkol sa elemento.

Para sa kumpletong paglalarawan ng lahat ng mga attribute at mga paraan, bisitahin mo ang aming Manwal ng Canvas ng HTML.

Sample

Halimbawa 1

Idraw nang real-time ang isang pulang parihaba at ipakita ito sa elemento na <canvas>:

<canvas id="myCanvas">
Ang iyong browser ay hindi sumusuporta sa tag na canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Subukan nang personal

Halimbawa 2

Isang ibang halimbawa ng <canvas>:

<canvas id="myCanvas">
Ang iyong browser ay hindi sumusuporta sa tag na canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// I-open ang transparency
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Subukan nang personal

Attribute

Attribute Halaga Paglalarawan
height Pixel na halaga Tinutukoy ang taas ng pintaan. Ang default na halaga ay 150.
width Pixel na halaga Tinutukoy ang lapad ng pintaan. Ang default na halaga ay 300.

Global na attribute

<canvas> Ang tag ay sumusuporta sa Global na attribute sa HTML.

Attribute ng kaganapan

<canvas> Ang tag ay sumusuporta sa HTML na attribute ng kaganapan.

Default na CSS na setting

Ang karamihan ng mga browser ay magpapakita ng mga sumusunod na default na halaga: <canvas> Elemento:

canvas {
  height: 150px;
  width: 300px;
}

Subukan nang personal

Ang kasaysayan ng <canvas>

Ang HTML na elemento ay dinisenyo para sa client-side vector graphics. Wala itong kanyang sariling pag-uugali, ngunit nagpapakita ng isang drawing API sa client JavaScript upang ang script ay makapagluluto ng kung anong bagay na gusto nilang idraw sa isang liwanag na pintaan.

Ang <canvas> tag ay ipinakilala ng Apple sa Web browser ng Safari 1.3. Ang dahilan para sa ito ay ang kapangyarihan ng pagpipinta ng HTML sa Safari ay ginagamit din ng komponent ng Dashboard ng Mac OS X, at ang Apple ay nagnanais ng isang paraan para suportahan ang scriptable graphics sa Dashboard.

Ang Firefox 1.5 at Opera 9 ay sinundan ng pangunahing tagapagpalakad ng Safari. Ang dalawang browser na ito ay sumusuporta sa <canvas> tag.

Kahit na maaari naming gamitin ang <canvas> tag sa IE, at gumawa ng pinagsama-samang canvas sa pamamagitan ng sangkap na pang JavaScript (na pinangunahan ng Google) sa pagtulong ng suporta ng VML ng IE. Tingnan din:http://excanvas.sourceforge.net/.

Ang pagsisimula ng pagtanda ng <canvas> ay pinangunahan ng hindi opisyal na asosasyon ng mga tagagawa ng Web browser, at sa kasalukuyan, ang <canvas> ay naging isang opisyal na tag sa HTML 5 draft. Tingnan din:http://www.whatwg.org/specs/web-apps/current-work/

Ang pagkakaiba ng <canvas> tag sa SVG at VML

Ang isang mahalagang pagkakaiba ng <canvas> tag sa SVG at VML ay, ang <canvas> ay may isang API ng pagpipinta na nakabase sa JavaScript, habang ang SVG at VML ay gumagamit ng isang dokumentong XML para sa paglalarawan ng pagpipinta.

Ang dalawang paraan na ito ay magkapareho sa pagkilos, kahit anong isa ay maaaring imitate ng isa. Sa panig ng labas, sila ay lubhang kaiba, ngunit bawat isa ay may katalungan at kahinaan. Halimbawa, ang pagpipinta sa SVG ay madaling ipalit, basta alisin ang elemento mula sa kanyang paglalarawan.

Upang alisin ang mga elemento mula sa isang <canvas> tag ng parehong grapik, kadalasan kailangang alisin muna ang pagpipinta at muling idraw ito.

Kung paano gamitin ang <canvas> tag sa pagpipinta

Ang karamihan sa mga API ng pagpipinta sa Canvas ay hindi tinukoy sa mismong elemento ng <canvas>, kundi sa pamamagitan ng paggamit ng pagtawag sa method na getContext()sa isang 'lugar ng pagpipinta' na objekto.

Ang Canvas API ay gumagamit din ng paglalarawan ng linya. Ngunit, ang linya ay tinukoy sa pamamagitan ng isang serye ng pagtawag sa mga method, hindi sa pamamagitan ng isang string na may titik at numero, tulad ng pagtawag sa mga method na beginPath() at arc().

หลังจากที่กำหนดเส้นทาง วิธีอื่นๆ เช่น fill() ทั้งหมดเป็นการปฏิบัติต่อเส้นทางนี้ คุณสมบัติต่างๆ ของสภาพแวดล้อมการวาด เช่น fillStyle ชี้แจงว่าการปฏิบัติเหล่านี้จะถูกใช้งานอย่างไร

หมายเหตุ：หนึ่งในสาเหตุที่ Canvas API มีขนาดเล็กมากคือมันไม่มีการสนับสนุนการวาดข้อความ ในการเพิ่มข้อความเข้าสู่กราฟิก <canvas> ต้องการวาดมันด้วยตัวเองและทำการผสมทำให้เป็นภาพบิตแมบหรือใช้ CSS positioning ข้างบน <canvas> ในการปิดกั้นข้อความ HTML

การสนับสนุนโดยเบราเซอร์

ตัวเลขในตารางระบุตอนที่เบราเซอร์แรกที่สนับสนุนองค์ประกอบนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0