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".