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, A-3564



©® Media Nauka 2008-2023 r.