Canvas HTML5
- Poprzednia strona Atrybuty formularza HTML Input
- Następna strona HTML5 SVG
Element canvas używany jest do rysowania grafik 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 różne metody rysowania ścieżek, prostokątów, okręgów, znaków oraz dodawania obrazów.
Utwórz element Canvas
Dodaj element canvas do strony HTML5.
Określ id elementu, szerokość i wysokość:
<canvas id="myCanvas" width="200" height="100"></canvas>
Rysowanie za pomocą JavaScript
Sam element canvas nie ma zdolności rysowania. Wszystkie operacje rysowania muszą być wykonane wewnętrznie w JavaScriptie:
<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 go 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: rysuj prostokąt 150x75 na rysunku, zaczynając od górnego lewego rogu (0,0).
Jak pokazano poniżej, współrzędne X i Y rysunku na rysunku są używane do lokalizacji rysunku na rysunku.
Przykład: podnieś 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 - stopniowy
Użyj określonych przez Ciebie kolorów do rysowania stopniowego tła:
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 tagu HTML5 canvas. </canvas>
Tutorial HTML Canvas
Chcesz dowiedzieć się więcej o rysunku, odwiedź naszą Tutorial HTML Canvas.
- Poprzednia strona Atrybuty formularza HTML Input
- Następna strona HTML5 SVG
