Canvas elements

Canvas (angļu: canvas — ‘audekls’) ir HTML 5 elements, kas paredzēts skriptu valodas vizualizācijai, izmantojot 2d un bitmap attēlus.

Vēsture

Canvas pirmatnēji tika izveidots 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ākamās paaudzes tīkla tehnoloģijām.

Pielietojums

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

Š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ējās saites

WHATWG specifikācija (angliski)
Обучение основам canvas на сайте Mozilla Developer center (krieviski)
Mozilla Canvas 3D (angliski)

Šis ar informācijas tehnoloģijām saistītais raksts ir nepilnīgs. Jūs varat dot savu ieguldījumu Vikipēdijā, papildinot to.