Canvas elements

Vikipēdijas lapa
Pārlēkt uz: navigācija, meklēt

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 | labot pirmkodu]

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 | labot pirmkodu]

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 | labot pirmkodu]

Š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ējas saites[labot šo sadaļu | labot pirmkodu]