Piękno geometrii
Potraktujmy stronę internetową jako płótno malarskie, kanwę, na której namalujemy jakąś kompozycję złożoną z figur geometrycznych.
Inspiracją będzie malarstwo Ellswortha Kelly'ego, amerykańskiego artysty, w swoich pracach często nawiązującego do kierunku abstrakcji geometrycznej.
Przygotujmy kanwę <canvas>, na której namalujemy nasze obrazy:
<canvas id = "canvas"></canvas>
Przykładowy styl kanwy w pliku CSS:
#canvas {
width: 500px;
height: 500px;
position: absolutne;
left: 10%;
top: 10%;
background-color: #F8F5EE;
border: 15px solid #F5F5F5;
}
W pliku HTML wywołamy funkcję rysującą draw():
<script>draw()</script>
której zapis będziemy zmieniać w zależności od tego, co chcemy namalować na kanwie.
A oto cały, bardzo uproszczony szkielet naszej strony HTML:
<html>
<head>
<link rel = "stylesheet" href = "style.css>
</head>
<body>
<canvas id = "canvas"></canvas>
<script src = "script.js"></script>
<script>draw()</script>
</body>
</html>
Ellsword Kelly, Linia pionowa:
Zakodujemy teraz podobny obraz w funkcji draw() w pliku JavaScript:
var canvas = document.getElementById('canvas'); // odniesienie do Id elementu canvas
var ctx = canvas.getContext('2d'); /* odniesienie do kontekstu elementu canvas w dwuwymiarowej przestrzeni rysowania */
var draw = function(){
// metoda fillRect() rysuje prostokąt wypełniony kolorem:
ctx.fillRect(200,0,4,200);
}
A oto efekt działania kodu:
Ellsword Kelly, Pasmo poziome
Wypełnimy płótno większą liczbą prostokątów, wykorzystując pętlę:
var draw = function(){
for(i = 0; i < 290; i++) {
ctx.fillRect(i; 0; 2; 200);
i += 10;
}
}
Efekt końcowy:
Komentarze
Prześlij komentarz