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>
Komętuje