Canvas-taggar är en integrerad del av HTML5-kodning. Canvas låter användaren rita olika rasterbaserade bilder som geometriska 2D-figurer, ladda bilder och media och ger till och med möjlighet att ta in animationer.
Men för att utnyttja en Canvas-taggar maximalt måste man ha expertis i kodning med JavaScript. Så här kan du rita med canvas:
Använd
<canvas></canvas>
taggen för att skapa ett element. Som standard kommer arbetsytan att ha 300 pixlar i bredd och 150 pixlar på höjden. Du kan ändra detta genom att ändra taggen och specificera dina krav. Till exempel,
<canvas height=”100″width=”200″></canvas>
För att skapa en gräns med Canvas kan man använda sig av CSS. Exemplet nedan kan användas som referens:
<style>
canvas { border:1px solid #333; }
</style>
För att få detta att fungera med JavaScript måste användaren skapa ett ID. När det är gjort kommer du att kunna behålla det som referens.
<canvas height=”100″width=”200″id=”demoCanvas”></canvas>
Infogar arbetsytans ID i en variabel:
<script type=”text/javascript”>
var canvasID = document.getElementById(“demoCanvas”);
</script>
Ändra arbetsytan till 2D eller 3D:
Använd
var canvas = canvas.getContext(“2d”);
att skapa en duk efter ditt behov. När du har fått en referens till din Canvas, infoga ett koncept och du är redo att rita.
Hur kan du uppnå några grundläggande former med Canvas?
Se taggarna nedan för att skapa några grundläggande former:
Dra ett streck:
var c = document.getElementById(“lineCanvas”);
var ctx = c.getContext(“2d”);
ctx.moveTo (0,0);
ctx.lineTo (100,100);
ctx.stroke ();
Text med streck:
var c = document.getElementById(“strokeCanvas”);
var ctx = c.getContext(“2d”);
ctx.font “25px arial”;
ctx.strokeText (“Canvas”,10,30);
Laddar bilder:
var myImage = new Image();
myImage .src = “logo.jpg”;
myImage .onload function() { context.drawImage(myImage, 30, 15, 130, 110); }
Ett Canvas-element kan också användas för att rita gradienter och skuggor för att skala, rotera och transformera de skapade formerna. Man kan vara nyfiken på vad som är så speciellt med Canvas i ActionScript- och Flash-teknikens tidevarv?
Här är några bra anledningar till att använda Canvas:
- En av de viktigaste anledningarna är att Canvas, som en del av HTML5-plattformen, är helt gratis. Användare behöver inte spendera pengar på dyr programvara som “Adobe Flash” för att börja koda. Canvas ger en fantastisk möjlighet för utvecklare att lära sig nya saker eftersom det är synligt i kärn källan till en webbplats utvecklad med HTML5.
- Med Canvas kunde användaren helt enkelt börja koda och se resultatet visas i webbläsaren. Det finns inget krav på att någon plugin ska installeras först, som Adobe Flash Player.
- Dagens teknik gör det möjligt för en webbläsare att överföra grafikintensiva uppgifter till en GPU för omedelbar bearbetning istället för att överanstränga processorn. Detta ger användaren stora prestanda vinster när han använder Canvas.
Fördelar med att använda Canvas:
Fördelarna med att använda Canvas-element är många. Några av de viktiga inkluderar möjligheten för element att fungera på vilken HTML5 webbläsare som helst. Eftersom det är en del av HTML5-plattformen är det enkelt att skapa bitmappsgrafik och vektorer på skärmen. Canvas har förmågan att rendera bilder och det kräver inte analys av JavaScript. Canvas är textbaserat och kan läsas av alla sökmotorer, vilket skapar en inverkan på SEO också. Canvas erbjuder plattformsoberoende funktionalitet eftersom det fungerar på både Android- och iOS-enheter också.
Nackdelar med att använda Canvas:
Nackdelarna med att använda Canvas är att det inte längre stöds av versioner före IE9. Om JavaScript-alternativet är aktiverat i webbläsaren, kommer Canvas att skapa en tom. Det finns heller inget alternativ att klicka på enskilda objekt; endast hela elementet kan väljas.
Slutsats:
Canvas är en av de mest eftertraktade funktionerna i HTML5. I synk med JavaScript ger Canvas-element ett stort utbud av former och former. Det är ett mycket kraftfullt verktyg, särskilt för unga utvecklare eftersom det är en öppen källkods plattform och det krävs inga investeringar. Den har förmågan att turboladda tråkiga former till rika, underbara animationer.