Taggen <canvas> HTML5

Den nya taggen är en tag <canvas> HTML5 finns inte i tidigare versioner, som kan användas för att rita och arbeta med grafik.

Taggen <canvas> behöver ett skriptspråk stöd, såsom JavaScript för att fungera ordentligt och utföra fullt dess potential.

Syftet med denna artikel är att illustrera den grundläggande användningen av de nya taggarna, men några punkter som framförts av konstant användning av praktiska exempel, hoppas jag, kommer att underlätta inlärning.

Premiss

Som en absolut nyhet i den bästa duken inte stöds av alla webbläsare, så det är möjligt att demonstrationen exempel i denna artikel inte visas korrekt.
Testet utfördes med Google Chrome, som du inte har upplevt några problem.

Använd taggen <canvas>

Gemensam användning av Canvas-taggen är ganska enkel och inte skiljer sig från andra HTML-taggar.
Formellt Canvas är en enkel behållare och som sådan har en starttagg (<canvas>) och stängning (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Element som inte stöds







 </ Canvas>

Om måtten inte anges uttryckligen (med hjälp av de attribut bredd och höjd) storleken tilldelats behållaren är standard, en grundläggande rektangel med höjden 300 och 150.
Attributet id, naturligtvis, är inte nödvändigt, men enligt min mening är det alltid en bra idé att kalla att ha en unik referens för varje objekt som används på sidan.

Texten del avgränsas av <canvas> och </ canvas> att representera anteckningen anger när bilden inte stöds av din webbläsare.

Innan du börjar med genomförandet detaljer testa potentialen av duken med en enkel kod för att testa live:

 <canvas id="bandierina" width="180"> height = "100"> stöds inte </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ('flagga');







 var c = canvas.getContext (2 d ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = "# FFFFFF";







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ Script>

På denna sida kan du se resultatet av denna kod (för att se ut på rätt sätt, du måste ha återigen en webbläsare som stöder HTML 5).

Som redan aviserats i början av artikeln i denna del av koden är tydligt att duken fungerar med hjälp av ett skript. Från detta exempel kan vi omedelbart notera standardiserad teknik för att extrahera objekt variabler arbetsytan bakgrund:

 / / Skapa duken objektet genom ID







 var canvas = document.getElementById ('flagga');









 / / Skapa en ny tvådimensionell objekt på arbetsytan







 var c = canvas.getContext (2 d ');

Javascript getElementById metod butiker objektet i en variabel duk, genom värdet på sina ID-fält, getContext (2 d) tar sammanhang, eller ett objekt som ger programmeraren ett antal metoder att arbeta med duken som önskas (i vårt fall du vill arbeta med tvådimensionell grafik funktioner, dvs 2D).

På de följande sidorna kommer vi att lista några grundläggande operationer bra att programmeraren avser att använda sig av duken.

• <<
• 1
• 2
• 3
• 4
• 5
• >>