Canvas: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
 
(3 mellanliggande sidversioner av samma användare visas inte)
Rad 7: Rad 7:
Sätter höjden på regionen i CSS-pixlar, förvalet är 150. Kan även anges via CSS-regler.
Sätter höjden på regionen i CSS-pixlar, förvalet är 150. Kan även anges via CSS-regler.
== Exempel ==
== Exempel ==
<codepen pen="NqMrax" tab="html,result" height="200">
<codepen pen="NqMrax" tab="html,result" height="300">
<syntaxhighlight lang="html5">
<canvas id="ritregion" width="200" height="100">
  Din webbläsare stödjer inte &lt;canvas&gt;-grafik.
</canvas>
</syntaxhighlight>
</codepen>
</codepen>
Ovanstående skapar en tom grafikregion. Om användarens webbläsare inte stödjer <code>canvas</code>, visas texten "Din webbläsare stödjer inte &lt;canvas&gt;". För att göra något vettigt med <code>canvas</code> måste man använda sig av [[JavaScript]].
Ovanstående skapar en tom grafikregion. Om användarens webbläsare inte stödjer <code>canvas</code>, visas texten "Din webbläsare stödjer inte &lt;canvas&gt;". För att göra något vettigt med <code>canvas</code> måste man använda sig av [[JavaScript]].

Nuvarande version från 30 januari 2019 kl. 15.19

Används för att skapa en region där man kan rita med hjälp av JavaScript. Kan t.ex. användas för att skapa webb-spel. För äldre webbläsare som inte stödjer detta element kan man definiera vad som ska visas istället.

Tillgänliga attribut

De Globala attributen är tillgängliga för denna tagg.

width

Sätter bredden på regionen i CSS-pixlar, förvalet är 300. Kan även anges via CSS-regler.

height

Sätter höjden på regionen i CSS-pixlar, förvalet är 150. Kan även anges via CSS-regler.

Exempel

See the Pen NqMrax by Patrik Grip-Jansson (@PGJ) on CodePen.

Ovanstående skapar en tom grafikregion. Om användarens webbläsare inte stödjer canvas, visas texten "Din webbläsare stödjer inte <canvas>". För att göra något vettigt med canvas måste man använda sig av JavaScript.

Referenser

Taggens definition i WHATWGs levande HTML-standard

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Taggens definition i HTML5-standarden

http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element