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

Vēsture labot šo sadaļu

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 labot š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 labot š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>
 
Attēla zīmēšana uz 2d Canvas virsmas

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 labot šo sadaļu