Edytor zadań - ruch w canvas cz.3

Opis

Ruch w `canvas` cz.3

Kliknij na przycisk "Pokaż".

Stworzymy cykliczne rysowanie koła i paletki w zależności od zmiennych. Połączymy w jednej funkcji rysowanie płótna (usuwamy tym poprzednie rysunki), rysowanie koła i paletki i zmienimy położenie następnego rysowania koła. Będziemy wywoływać tę funkcję co pewien czas osiągając wrażenie ruchu.

Ustawienie płótna do rysowania canvas na pełnym oknie, zmienne
+ w zmiennych dodano zmienne paletki
Funkcje rysowania (koło +)
+ dodano funkcję rysowania paletki (2.1)
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany
+ dodano rysowanie paletki
Cykliczne wywoływanie funkcji rysowania co 10ms (0.01s)

Kod

👀

//--------------- zmienne ---------------
ballRadius = 10;
var x = ballRadius;
var y = canvas.height-ballRadius;
var dx = 1;
var dy = -1;

//---wysokość, szerokość, położenie X paletki---
var paletkaH = 10; //wysokość paletki
var paletkaW = 75; //szerokość paletki
var paletkaX = (canvas.width-paletkaW) / 2;

//---2--- RYSOWANIE KOŁA w zależności od x, y --
function drawBall() {
   ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
//---2.1--- RYSOWANIE PALETKI ------
function drawPaletka() {
    ctx.beginPath();
    ctx.rect(paletkaX, canvas.height-paletkaH-2, paletkaW, paletkaH);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}

//--3-- CZYSZCZENIE, RYSOWANIE, ZMIANY----
function draw() {
    ctx.fillStyle = "hsl(0, 0%, 0%, 0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaletka(); //dodano rysowanie paletki
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    x += dx;
    y += dy;
}

//----4--- ODŚWIEŻANIE RYSOWANIA ---------
setInterval(draw, 10);
</script>

Podgląd:

📂

Ruch w canvas cz.3

Ruch w `canvas` cz.3