KURS HTML5, CSS3 I NOWOCZESNY JAVASCRIPT (ES6)
Intensywny, 24-godzinny kurs tworzenia nowoczesnych stron i aplikacji internetowych. Uczestnicy poznają aktualne standardy HTML5, stylowanie interfejsów w CSS3 oraz praktyczne zastosowanie JavaScript i ES6. Szkolenie łączy teorię z warsztatami, dzięki czemu każdy moduł kończy się praktycznym projektem lub ćwiczeniami.
Kurs przygotowuje do samodzielnego tworzenia semantycznych stron, interaktywnych komponentów oraz prostych aplikacji webowych działających również w trybie offline.
Moduł 8 — Canvas i animacje (3 godz.)
1. Canvas a CSS
- Porównanie możliwości
<canvas>i stylów CSS. - Tworzenie dynamicznych efektów graficznych w przeciwieństwie do statycznego stylowania CSS.
- Integracja Canvas z HTML i CSS w aplikacjach webowych.
2. Rysowanie kształtów, tekstu i obrazu
- Rysowanie prostych figur:
rect(),arc(),lineTo(). - Wyświetlanie tekstu za pomocą
fillText()istrokeText(). - Ładowanie i rysowanie obrazów zewnętrznych:
drawImage().
3. Tworzenie animacji i pobieranie danych zewnętrznych
- Animacje w Canvas z
requestAnimationFrame(). - Zmiana pozycji, koloru i rozmiaru elementów w czasie rzeczywistym.
- Pobieranie danych z API lub plików JSON i dynamiczne aktualizowanie grafiki.
Moduł 8 — Canvas i animacje (3 godz.)
Moduł uczy tworzenia dynamicznych grafik i animacji w HTML5 przy użyciu elementu <canvas>. Uczestnicy poznają zarówno podstawowe rysowanie kształtów i tekstu, jak i techniki animacji oraz integrację z danymi zewnętrznymi.
1. Canvas a CSS
Chociaż CSS umożliwia efekty wizualne, Canvas pozwala na pełną kontrolę nad pikselami i tworzenie interaktywnych grafik dynamicznych.
2. Rysowanie kształtów, tekstu i obrazu
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Prostokąt
ctx.fillStyle = 'teal';
ctx.fillRect(20, 20, 150, 100);
// Tekst
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Witaj Canvas!', 50, 50);
// Obraz
const img = new Image();
img.src = 'obraz.png';
img.onload = () => {
ctx.drawImage(img, 100, 100, 200, 150);
};
3. Tworzenie animacji i pobieranie danych zewnętrznych
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'orange';
ctx.fillRect(x, 50, 50, 50);
x += 2;
if(x > canvas.width) x = 0;
requestAnimationFrame(animate);
}
animate();
// Pobieranie danych JSON i rysowanie
fetch('dane.json')
.then(res => res.json())
.then(data => {
data.forEach(item => {
ctx.fillRect(item.x, item.y, item.width, item.height);
});
});
Po ukończeniu modułu uczestnicy będą potrafili tworzyć interaktywne grafiki, animacje oraz integrować je z danymi zewnętrznymi w swoich aplikacjach webowych.