Grafika HTML na płótnie
Element HTML <canvas>służy do rysowania grafiki na stronie internetowej.
Grafika po lewej jest utworzona za pomocą <canvas>. Pokazuje cztery elementy: czerwony prostokąt, prostokąt z gradientem, wielokolorowy prostokąt i wielokolorowy tekst.
Co to jest kanwa HTML?
Element HTML <canvas>służy do rysowania grafiki w locie za pomocą JavaScript.
Element <canvas>jest jedynie pojemnikiem na grafikę. Musisz użyć JavaScript, aby faktycznie narysować grafikę.
Canvas ma kilka metod rysowania ścieżek, ramek, okręgów, tekstu i dodawania obrazów.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje dany
<canvas>element.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Przykłady płótna
Kanwa to prostokątny obszar na stronie HTML. Domyślnie kanwa nie ma obramowania ani zawartości.
Znacznik wygląda tak:
<canvas id="myCanvas" width="200" height="100"></canvas>
Uwaga: Zawsze określaj idatrybut (do którego odwołuje się skrypt) widthoraz heightatrybut i definiujący rozmiar płótna. Aby dodać obramowanie, użyj styleatrybutu.
Oto przykład podstawowego, pustego płótna:
Przykład
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Dodaj JavaScript
Po utworzeniu prostokątnego obszaru płótna musisz dodać JavaScript, aby wykonać rysunek.
Oto kilka przykładów:
Narysuj linię
Przykład
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Narysuj okrąg
Przykład
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Narysuj tekst
Przykład
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Tekst obrysu
Przykład
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Rysuj gradient liniowy
Przykład
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Rysuj okrągły gradient
Przykład
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Rysuj obraz
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Samouczek HTML Canvas
Aby dowiedzieć się więcej <canvas>, przeczytaj nasz samouczek HTML Canvas .