webkod.pl

Ostatnio edytowany:

canvas

Autor: Virtual Patriot

Przeznaczenie elementu canvas

Element canvas reprezentuje obszar do tworzenia statycznej, jak również dynamicznej grafiki za pomocą języka programowania JavaScript.

Dodatkowe techniczne informacje o elemencie canvas

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<main>
  <canvas>
    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "canvas".
    </p>
  </canvas>
</main>

Kontekstem zewnętrznym przykładowego elementu "canvas" jest element "main". Wspomniany element "main" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "main", jest prawidłowym kontekstem zewnętrznym dla elementu "canvas".

kontekst wewnętrzny
kontekst wewnętrzny elementu rodzica

Przykładowy Kod HTML

<main>
  <canvas>
    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "canvas".
    </p>
  </canvas>
</main>

Kontekstem wewnętrznym przykładowego elementu "canvas" jest wyłącznie element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "canvas", którym to elementem rodzicem w tym wypadku jest element "main", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "canvas".

Element canvas posiada zdolność fallback. Zdolność fallback elementu canvas uaktywnia się w momencie gdy przeglądarka internetowa nie interpretuje elementu canvas.

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<canvas> ... </canvas>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display
  • inline (jeżeli przeglądarka internetowa nie interpretuje danego elementu canvas)
  • inline-block (jeżeli przeglądarka internetowa interpretuje dany element canvas)

Dodatkowe domyślne reguły CSS elementu canvas

/* jeżeli przeglądarka internetowa interpretuje element "canvas" */
canvas {
  display:inline-block;
  width:300px;
  height:150px;
}

Interpretacja elementu canvas

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu canvas

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem canvas określa wartość wysokości, jaką powinien posiadać dany element canvas.

Wartość domyślna

150 (w każdej sytuacji)

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>canvas { border:1px solid black; }</style>
  </head>
  <body>

    <canvas id="c-1" height="300"></canvas>

    <script>
      (function(){
          var canvas = document.getElementById('c-1');
          var c = canvas.getContext('2d');

          c.beginPath();
          c.arc(100, 75, 50, 0,2 * Math.PI);
          c.stroke();
          c.beginPath();
          c.arc(150, 125, 60, 0,2 * Math.PI);
          c.stroke();
          c.beginPath();
          c.arc(200, 175, 70, 0,2 * Math.PI);
          c.stroke();
      })();
    </script>

  </body>
</html>

Rezultat

Wartość wysokości przykładowego elementu "canvas" wynosi "300" pikseli, ponieważ do wspomnianego elementu "canvas" został dodany atrybut "height" wraz z wartością "300".

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem canvas określa wartość szerokości, jaką powinien posiadać dany element canvas.

Wartość domyślna

300 (w każdej sytuacji)

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>canvas { border:1px solid black; }</style>
  </head>
  <body>

    <canvas id="c-2" width="400"></canvas>

    <script>
      (function(){
          var canvas = document.getElementById('c-2');
          var c = canvas.getContext('2d');

          c.beginPath();
          c.arc(100, 75, 50, 0,2 * Math.PI);
          c.stroke();
          c.beginPath();
          c.arc(175, 100, 45, 0,2 * Math.PI);
          c.stroke();
          c.beginPath();
          c.arc(250, 125, 40, 0,2 * Math.PI);
          c.stroke();
      })();
    </script>

  </body>
</html>

Rezultat

Wartość szerokości przykładowego elementu "canvas" wynosi "400" pikseli, ponieważ do wspomnianego elementu "canvas" został dodany atrybut "width" wraz z wartością "400".