Innehållsförteckning
Elementet Duk Det är en av de mest efterlängtade nyheterna som den har HTML5 Eftersom det är ett seriöst alternativ till Adobes Flash-plugin, tack vare dess inbyggda funktioner och genom att inte vara beroende av ett tredjepartsbibliotek, får vi stabilitet och webbläsarstöd direkt, om det skulle uppstå problem med implementeringen av HTML5-standarden .Elementet Duk tillåter oss att avgränsa ett område i våra dokument HTML5 där vi kan rita och till och med lägga till effekter och rörelser genom Javascript.
Canvas -elementet
Innan du kan börja arbeta med objektet Duk, vi ska definiera dess grundläggande egenskaper, vi har att det är ett flödeselement, det är helt nytt i HTML5, dess attribut är höjd för dess höjd och bredd för dess bredd.
Låt oss se nedan ett litet exempel på hur vi kan definiera en Canvas i vårt dokument:
Exempel Din webbläsare stöder inte elementet duk Låt oss snabbt se vad som händer i exemplet; först definierar vi en stil där vi tilldelar en lite tjock kant för att kunna skilja vår Duk tom, sedan startar vi Canvas -elementet med dess öppningsetikett och definierar dess höjd- och breddattribut, inuti etiketterna lägger vi ett meddelande om dokumentet öppnas med en webbläsare som inte stöder denna specifikation av standarden.
Låt oss nu se hur den här koden som vi just har förklarat ser ut i vår webbläsare:
Vår första teckning
Som vi nämnde i början av handledningen måste vi använda Javascript för att rita och göra åtgärder inom Canvas, för detta kommer vi att använda en metod som kallas getContext () som placerar oss i Canvas -sammanhanget och med det kan vi berätta vad de ska visa.
Vi kan rita figurer i både 2D och 3D, för detta passerar vi i fallet med det första, argumentet "2d".
Låt oss titta på följande exempel för att bättre definiera vad vi förklarar:
Exempel Din webbläsare stöder inte elementet duk Här gjorde vi helt enkelt att definiera en variabel ctx som vi ska tilldela objektet till dokumentera och den senare kommer att kalla metoden getContext och applicera den på Canvas -elementet; då har vi att variabeln ctx kallar en metod som kallas fillRect och till detta passerar vi några koordinater, om vi tittar noga passerar vi det 4 sidor, låt oss se att det har ritat detta i webbläsaren:
