Edytor zadań - ruch w canvas cz.4

Opis

Ruch i sterowanie myszą w `canvas cz.4.2`

Kliknij na przycisk "Pokaż".

Stworzymy ruch paletki w zależności od detekcji klawiszy strzałek.

Ustawienie płótna do rysowania canvas na pełnym oknie, zmienne paletki
Funkcje rysowania paletki
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany położenia środka paletki w zależności od pozycji X myszy.
Cykliczne wywoływanie funkcji rysowania co 10ms (0.01s)
Detektor zdarzeń ruchów myszką: każdy ruch myszką powoduje wywołanie funkcji obsługi tego zdarzenia - 'mysz'
Funkcja obsługi myszy. Obliczamy odległość między lewą krawędzią płótna i wskaźnika myszy czyli różnica między poziomą pozycją myszy w rzutni ( e.clientX) a odległością między lewą krawędzią obszaru roboczego a lewą krawędzią widoku ( canvas.offsetLeft). Pozycja paletki będzie przesumięta o połowę paletki by pozycja myszy oznaczała pozycję środka paletki.

Kod

//--------------- zmienne ---------------
var paletkaH = 10; //wysokość paletki
var paletkaW = 75; //szerokość paletki
var paletkaX = (canvas.width-paletkaW) / 2;

//---2--- 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);
 drawPaletka(); 
}

//--5-- Detektor zdarzeń - mysz
document.addEventListener("mousemove", mysz, false);

//--6-- funkcja obsługi myszki
function mysz(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paletkaX = relativeX - paletkaW/2;
    }
}

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

Podgląd:

📂

Ruch i sterowanie myszą w canvas cz.4.2

Ruch i sterowanie myszą w `canvas cz.4.2`