<canvas>
Płótno do rysowania grafiki bitmapowej za pomocą JavaScriptu.
- Wyświetlanie
- inline (element zastępowany)
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść zastępcza, widoczna, gdy płótno nie działa, na przykład przy wyłączonym JavaScripcie
Przykład
#<canvas id="scene" width="320" height="150">
Fioletowy kwadrat, pomarańczowe koło i niebieska linia.
</canvas>
<script>
const ctx = document.getElementById('scene').getContext('2d')
ctx.fillStyle = '#8b5cf6'
ctx.fillRect(20, 20, 80, 80)
ctx.beginPath()
ctx.arc(165, 60, 40, 0, Math.PI * 2)
ctx.fillStyle = '#f97316'
ctx.fill()
ctx.beginPath()
ctx.moveTo(230, 100)
ctx.lineTo(300, 20)
ctx.strokeStyle = '#38bdf8'
ctx.lineWidth = 6
ctx.stroke()
ctx.fillStyle = '#e5e7eb'
ctx.font = '15px system-ui'
ctx.fillText('Kształty narysowane w JavaScripcie', 20, 135)
</script>Definicja i zastosowanie
#Element <canvas> to prostokątne płótno, na którym rysujesz kodem JavaScript: kształty, wykresy, animacje, a nawet całe gry. Sam HTML tworzy tylko pusty obszar, a rysowanie odbywa się przez kontekst pobrany metodą getContext("2d") (albo getContext("webgl") dla grafiki 3D).
Canvas rysuje piksele, a nie obiekty. Po narysowaniu koła nie ma już „elementu koła”, który można by ostylować w CSS albo kliknąć, więc przy interakcji sam musisz obliczać, w co trafił użytkownik. Jeśli potrzebujesz kilku skalowalnych kształtów, ikon czy diagramów, zwykle lepszy będzie <svg>.
Rozmiar płótna ustawiają atrybuty width i height (domyślnie 300 na 150 pikseli). Treść między znacznikami to tekst zastępczy: warto opisać w nim, co przedstawia grafika, bo sam rysunek jest dla czytników ekranu niewidoczny.
Składnia
#<canvas id="plotno" width="300" height="150"></canvas>Atrybuty
#liczba pikseli (domyślnie 300 i 150)
Szerokość i wysokość płótna w pikselach, czyli rozdzielczość rysunku. Jeśli powiększysz płótno w CSS bez zmiany tych atrybutów, obraz zostanie rozciągnięty i rozmyty, jak w dolnej części przykładu. Zmiana atrybutów w skrypcie czyści całe płótno.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#width / height
liczba pikseli (domyślnie 300 i 150)Szerokość i wysokość płótna w pikselach, czyli rozdzielczość rysunku. Jeśli powiększysz płótno w CSS bez zmiany tych atrybutów, obraz zostanie rozciągnięty i rozmyty, jak w dolnej części przykładu. Zmiana atrybutów w skrypcie czyści całe płótno.
<style>
canvas { display: block; margin-bottom: 8px; }
.blurry { width: 240px; height: 60px; }
</style>
<canvas class="sharp" width="240" height="60"></canvas>
<canvas class="blurry" width="60" height="15"></canvas>
<script>
document.querySelectorAll('canvas').forEach((canvas) => {
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#a78bfa'
ctx.font = canvas.height * 0.6 + 'px system-ui'
ctx.fillText('CodeWorlds', 4, canvas.height * 0.7)
})
</script>Więcej przykładów
#<canvas id="chart" width="320" height="150">
Wykres postępu: HTML 80%, CSS 60%, JavaScript 35%.
</canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d')
const courses = [
{ name: 'HTML', percent: 80, color: '#f97316' },
{ name: 'CSS', percent: 60, color: '#38bdf8' },
{ name: 'JS', percent: 35, color: '#facc15' }
]
ctx.font = '14px system-ui'
courses.forEach((course, index) => {
const y = 15 + index * 45
const width = course.percent * 2.2
ctx.fillStyle = course.color
ctx.fillRect(50, y, width, 28)
ctx.fillStyle = '#e5e7eb'
ctx.fillText(course.name, 8, y + 19)
ctx.fillText(course.percent + '%', 58 + width, y + 19)
})
</script>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Na ekranach o wysokiej gęstości pikseli rysunek bywa lekko rozmyty. Pomnóż
widthiheightprzezwindow.devicePixelRatio, rozmiar w CSS zostaw bez zmian i przeskaluj kontekst metodąctx.scale(). - Opisz zawartość płótna tekstem zastępczym albo atrybutem
aria-labelzrole="img", żeby grafika nie była pustym miejscem dla czytnika ekranu. - Do animacji używaj
requestAnimationFrame, a niesetInterval. Przeglądarka dopasuje wtedy tempo rysowania do odświeżania ekranu.
Powiązane hasła
#- <svg>Grafika wektorowa zapisana bezpośrednio w kodzie strony: ikony, logo, wykresy.
- <img>Obraz osadzony na stronie.
- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
- <figure>Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.
Widzisz błąd albo brakuje przykładu? Napisz do nas.