Canvas elements
Vikipēdijas raksts
Canvas (angļu: canvas — audekls) ir HTML 5 elements, kas paredzēts skriptu valodas vizualizācijai izmantojot 2d un bitmap attēlus
Satura rādītājs |
Vēsture [izmainīt šo sadaļu]
Canvas pirmatnēji tika izveidots priekš Apple, lietošanai Mac OS X tīkla komponentēs ar Safari pārlūkprogrammu. Vēlāk tas tika pielāgots Gecko tīmekļa pārlūkprogrammām un Opera tīmekļa pārlūkprogrammām, un standartizēts kā WHATWG uz nākošās paaudzes tīkla tehnoloģijām.
Pielietojums [izmainīt šo sadaļu]
Canvas sastāv no zīmējamā apgabala, kas tiek uzstādīts HTML kodā ar augstumu un platumu. JavaScript kods sniedz piekļuvi šim apgabalam, ļaujot veidot dinamiski veidotu grafiku.
Paraugs [izmainīt šo sadaļu]
Šis koda paraugs rada Canvas elementu html lapā:
<canvas id="paraugs" width="320" height="240"> Tavs tīkla pārlūks neatbalsta HTML5 Canvas. </canvas>
Koda paraugs ar attēlu piecās plaknēs
<html><head> <script type="text/javascript"> var siena = new Image(); siena.src = 'gmet01.jpg'; function zimet(){ var canvas = document.getElementById('Vietne'); var cimg = canvas.getContext("2d"); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = "#ffffff"; ctx.fillRect(25,15,450,365); ctx.strokeStyle = "#fa4a4a"; for (m = 0; m < 8; m++) { cimg.drawImage(siena, 0,8*m, 59,6,115-m*16,175+8*m,145+m*32,8);} for (m = 0; m <8; m++) { cimg.drawImage(siena, 0,8*m, 59,6,115-m*16,55-8*m,145+m*32,8); } for (m = 0; m <8; m++) { cimg.drawImage(siena, 8*m,0, 6,59,125-m*16,35-8*m,16,145+m*16); } for (m = 0; m <8; m++) { cimg.drawImage(siena, 8*m,0, 6,59,255+m*16,39-8*m,16,145+m*16); } cimg.drawImage( siena, 0,1, 59,59,135,55,120,120); ctx.fill(); ctx.stroke(); setTimeout(zimet,24); } else { }} </script></head><body onload="zimet();"><div> <canvas id="Vietne" width="580" height="450"></canvas></div></body> </html>
Ārējas saites [izmainīt šo sadaļu]
- WHATWG specifikācija (angliski)
- Обучение основам canvas на сайте Mozilla Developer center (krieviski)
- Mozilla Canvas 3D (angliski)