Canvas elements

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 
 Обучение основам canvas на сайте Mozilla Developer center 
 Mozilla Canvas 3D 

Kategorija:HTML
Kategorija:Skriptu valodas
Kategorija:Tīmekļa vietne