Program rysujący kółko na ekranie

Program rysujący kółko na ekranie

Jak narysować koło na ekranie? https://youtu.be/wrkLDPqZ1Js?t=7173
Pełna instrukcja: https://youtu.be/wrkLDPqZ1Js?t=1235

Poniżej znajdziesz kod który rysuje koło na ekranie w przeglądarce jako stronę www.
Jak uruchomić program i narysować koło?

Sposób 1
Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”.
Zapisz plik w dowolnym katalogu.
https://oki.org.pl/wp-content/uploads/2021/10/kolo_na_ekranie.html
Następne dwukrotnie kliknij na zapisanym pliku. Otworzy się przeglądarka i program narysuje niebieskie koło na żółtym tle.

Sposób 2
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik kolo_na_ekranie.html
Zwróć uwagę by był to plik kolo_na_ekranie.html a nie kolo_na_ekranie.html.txt lub kolo_na_ekranie.txt.
Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku kolo_na_ekranie.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.

Zmieniaj
Postaraj się zmienić kolory, współrzędne kółka, dodać nowe.
Albo utworzyć nową wspaniałą grafikę!
Powodzenia!


Program - strona www która rysuje koło na ekranie


<!DOCTYPE html>
<html>
<head>
 <style>
    #plansza {
	   background-color: yellow;
	}
 </style>
</head>

<body>
<canvas id="plansza" width="500px" height="300px">
</canvas>

<script>
 let plansza_gry = document.getElementById("plansza");
 let rysowanie = plansza_gry.getContext("2d");
 rysowanie.beginPath();
 rysowanie.fillStyle = "blue";
 rysowanie.arc(300, 150, 30, 0, 2*Math.PI);
 rysowanie.fill();
 rysowanie.closePath();
</script>

</body>
</html>
Program - strona www która rysuje koło na ekranie

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz