Canvas HTML5
- Poprzednia strona Atrybuty formularza wejściowego HTML
- Następna strona HTML5 SVG
Element canvas używany jest do rysowania grafiki na stronie.
Co to jest Canvas?
Element canvas w HTML5 używa JavaScript do rysowania obrazów na stronie.
Kanvas to obszar prostokątny, który można kontrolować na poziomie każdego pixela.
Canvas ma wiele metod rysowania ścieżek, prostokątów, okręgów, tekstu oraz dodawania obrazów.
Tworzenie elementu Canvas
Dodanie elementu canvas do strony HTML5.
Określenie id, szerokości i wysokości elementu:
<canvas id="myCanvas" width="200" height="100"></canvas>
Rysowanie za pomocą JavaScript
Sam element canvas nie ma możliwości rysowania. Wszystkie operacje rysowania muszą być wykonane wewnętrznie w JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript używa id do wyszukiwania elementu canvas:
var c=document.getElementById("myCanvas");
Następnie, utwórz obiekt kontekstu:
var cxt=c.getContext("2d");
Obiekt getContext("2d") jest wbudowanym obiektem HTML5, który ma wiele metod do rysowania ścieżek, prostokątów, okręgów, znaków oraz dodawania obrazów.
Poniższe dwie linie kodu rysują czerwony prostokąt:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Metoda fillStyle farbuje ją na czerwono, a metoda fillRect określa kształt, pozycję i rozmiar.
Rozumienie współrzędnych
Metoda fillRect ma parametry (0,0,150,75).
To znaczy: narysuj prostokąt 150x75 na płótnie, zaczynając od górnego lewego rogu (0,0).
Jak widać na rysunku, współrzędne X i Y rysunku używane są do lokalizacji rysunku na płótnie.
Przykład: umieść mysz nad prostokątem, aby zobaczyć współrzędne
Więcej przykładów Canvas
Poniżej znajdują się więcej przykładów rysowania na elemencie canvas:
Przykład - linia
Rysuj linię określając punkt startowy i końcowy:
Kod JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Element canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Twoja przeglądarka nie obsługuje elementu canvas. </canvas>
Przykład - okrąg
Rysuj okrąg określając rozmiar, kolor i pozycję:
Kod JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Element canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Twoja przeglądarka nie obsługuje elementu canvas. </canvas>
Przykład - gradient
Rysuj gradientne tło za pomocą kolorów określonych przez użytkownika:
Kod JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Element canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Twoja przeglądarka nie obsługuje elementu canvas. </canvas>
Przykład - obraz
Umieść obraz na płótnie:
Kod JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Element canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Twoja przeglądarka nie obsługuje etykiety HTML5 canvas. </canvas>
Tutorial HTML Canvas
Chcesz dowiedzieć się więcej o rysunku, odwiedź nasz Tutorial HTML Canvas.
- Poprzednia strona Atrybuty formularza wejściowego HTML
- Następna strona HTML5 SVG
