HTML5 Canvas - kształty

Na obiekcie Canvas można rysować różnego rodzaju kształty. Mogą to być prostokąty, elipsy i okręgi oraz dowolne inne figury. Kształty można wypełniać różnymi kolorami, gradientami, używać kanału alfa a także predefiniowanych operacji złożonych. Zaczniemy od prostokąta:

Rysowanie prostokąta

Aby narysować na obiekcie Canvas prostokąt należy użyć metody:

context.rect(x,y,szerokosc,wysokosc);

Metoda ta rysuje prostokąt w punkcie (x,y) o zadanej parametrami wysokości i szerokości.

Przykład - prostokąt

Oto przykład rysowania prostokąta:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth=15;
context.strokeStyle = "#AA0000";
context.rect(50,50,200,150);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa

Aby narysować na obiekcie Canvas wypełniony prostokąt, należy użyć metody:

context.fillRect(x,y,szerokosc,wysokosc);

Metoda ta wymaga zdefiniowania wcześniej stylu wypełnienia.

Przykład - wypełniony prostokąt

Oto przykład rysowania prostokąta:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth=15;
context.strokeStyle = "#AA0000";
context.rect(50,50,200,150);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa

Istnieje jeszcze metoda:

context.strokeRect(x,y,szerokosc,wysokosc);

Metoda ta rysuje prostokąt bez konieczności używania metody stroke().

Nie ma analogicznej metody dla wypełnionego prostokąta.

Rysowanie okręgu i koła

Aby narysować na obiekcie Canvas okrąg należy użyć metody:

context.arc(x,y,r,0,2*Math.PI,false);

Zauważ, że jest to szczególny przypadek rysowania łuku. Należy pamiętać, że przed użyciem tej metody należy użyć stylu wypełnienia (włąściwość context.fillStyle).

Przykład - koło i okrąg

Oto przykład rysowania koła i okręgu:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150,150,100,0,Math.PI*2,false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa

UWAGA! W powyższym przykładzie użyliśmy metody:

context.fill();

Zastosowanie tej metody oraz właściwości context.fillStyle; umożliwia rysowanie kształtów z funkcją ich wypełnienia przez określony styl. Jeżeli nie użyjemy w powyższym przykładzie obu komend dla wypełnień, otrzymamy okrąg, a nie koło.

Istotną kwestią jest kolejność stosowania w powyższym kodzie tych instrukcji. Używamy ich przed metodą stroke(); i najlepiej po metodzie rysującej kształt.

O wypełnieniach kształtów napiszę więcej w kolejnym artykule kursu.

Rysowanie własnych kształtów

W celu narysowania własnego i dowolnego kształtu użyjemy funkcji w JavaScript.

Przykład - własny kształt

Oto przykład rysowania własnego kształtu:

<html>
<head>
<script> function ksztalt(context, x,y,fillStyle) {
context.beginPath();
context.moveTo(x,y);
context.lineTo(x+40,y-40);
context.lineTo(x+40,y+40);
context.closePath();
context.fillStyle=fillStyle;
context.fill();
context.strokeStyle="black"
context.lineWidth=4;
context.stroke();
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
ksztalt(context,100,100,"blue");
ksztalt(context,150,220,"red");
ksztalt(context,50,120,"green");
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa





© medianauka.pl, 2018-07-09, ART-3564





Polecamy w naszym sklepie

Kolorowe skarpetki - football piłka nożna
Kolorowe skarpetki Miasto
Matematyka konkretna
Kolorowe skarpetki Kostka
Kolorowe skarpetki urodzinowe
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2022 r.