HTML/Appendices/Overzicht elementen/canvas

Uit Wikibooks

HTML

Inhoudsopgave
  1. Verklarende woordenlijst
  2. Overzicht tags
  3. Overzicht attributen
  4. Andere cursussen

Functie[bewerken]

Met dit element kun je onder andere tekeningen maken.

Voorbeeld[bewerken]

HTML-code: Een voorbeeld van het gebruik van het element canvas

<canvas id="canvas" width="400" height="400">Gebruik een browser die het html5 element canvas ondersteunt</canvas>

Zoals je ziet is er alleen het element. De tekst die je erin zet is voor het geval de gebruiker een browser gebruikt die het canvaselement niet ondersteunt. Het verdere verloop van het canvaselement is te vinden in een stukje javascriptcode.

JavaScript-code: Het javascriptgedeelte van het canvas element

<script language=javascript type=text/javascript>
// Hier wordt het canvas klaar gemaakt
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

// We gaan nu een lijn tekenen
ctx.beginPath(); 
ctx.lineWidth="2"; // Hier wordt de lijndikte bepaald
ctx.strokeStyle="green"; // We kiezen voor een groene lijn
ctx.moveTo(0,0);
ctx.lineTo(400,400);
ctx.stroke(); // Hier tekenen we de lijn
</script>
HTML 4-elementen

a · abbr · address · area · b · base · bdi · bdo · blockquote · body · br · button · caption · cite · code · col · colgroup · dd · del · dfn · div · dl · dt · em · fieldset · font · form · head · hr · html · hx · i · iframe · img · input · ins · kbd · label · legend · li · link · map · meta · noscript · object · ol · optgroup · option · p · param · pre · q · s · samp · script · select · span · strong · style · sub · sup · table · tbody · td · textarea · tfoot · th · thead · title · tr · u · ul · var

Nieuwe elementen in HTML 5

article · aside · audio · canvas · command · datalist · details · dialog · embed · figure · footer · header · hgroup · keygen · mark · meter · nav · output · progress · rp · rt · ruby · section · source · time · video

Verouderde elementen

acronym · applet · basefont · big · center · dir · frame · frameset · menu · noframes · small · strike · tt

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.