Autor publikacji
Virtual Patriot - Administrator

canvas

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu canvas

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

Dodatkowe artykuły związane z elementem canvas

brak

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

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

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

składnia HTML

<canvas> ... </canvas>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

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

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu canvas)

Przypuszczalnie 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

Atrybut Lokalny

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem canvas pozwala nam określić wartość wysokości, jaką powinien posiadać obszar do tworzenia grafiki reprezentowany przez 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(50, 50, 50, Math.PI / 2, Math.PI * 2);
          c.stroke();

          c.beginPath();
          c.arc(110, 110, 60, Math.PI / 2, Math.PI * 2);
          c.stroke();

          c.beginPath();
          c.arc(180, 180, 70, 0, Math.PI * 2);
          c.stroke();
      })();
    </script>

  </body>
</html>

Rezultat

Wartość wysokości obszaru do tworzenia grafiki reprezentowanego przez przykładowy element "canvas" wynosi "300" pikseli, ponieważ do wspomnianego elementu "canvas" został dodany atrybut "height" wraz z wartością "300".

Atrybut Lokalny

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem canvas pozwala nam określić wartość szerokości, jaką powinien posiadać obszar do tworzenia grafiki reprezentowany przez 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(50, 50, 50, Math.PI / 2, Math.PI * 2);
          c.stroke();

          c.beginPath();
          c.arc(110, 110, 60, Math.PI / 2, Math.PI * 2);
          c.stroke();

          c.beginPath();
          c.arc(180, 180, 70, 0, Math.PI * 2);
          c.stroke();
      })();
    </script>

  </body>
</html>

Rezultat

Wartość szerokości obszaru do tworzenia grafiki reprezentowanego przez przykładowy element "canvas" wynosi "400" pikseli, ponieważ do wspomnianego elementu "canvas" został dodany atrybut "width" wraz z wartością "400".