Dodałem możliwość zmiany motywu graficznego bloga na: jasny/ciemny.

Dodatkowo zmieniłem też czcionkę na tekst: teraz jest szeryfowa.

W czerwcu opublikowałem 3 wpisy:

JavaScript

1. Canvas: Jak pobrać pozycję kursora myszy?
2. Canvas: Obracanie obiektu za pomocą myszki
3. Jak sprawdzić, z jakiego motywu graficznego korzysta użytkownik?

Przeczytałem jedną książkę:

1. Helisa - Marc Elsberg

Przesłuchałem trzy audiobooki:

1. Monachium. W obliczu wojny - Robert Harris
2. Życie Violette - Valerie Perrin
3. Z mgły zrodzony - Brandon Sanderson

Motyw graficzny

Wiele systemów operacyjnych pozwala użytkownikowi na wybór motywu graficznego. Na przykład: jasny lub ciemny.

Istnieje możliwość pobrania informacji, jaki motyw graficzny preferuje użytkownik odwiedzający Twoją stronę internetową. Dzięki tej informacji będziesz mógł ustawić taki motyw także na stronie WWW.

Żeby sprawdzić, z jakiego motywu graficznego korzysta użytkownik, należy sprawdzić właściwość:

prefers-color-scheme

Dodatkowo można się tego dowiedzieć na dwa sposoby! Za pomocą CSS lub JavaScript

Sposób 1: CSS

// domyślny motyw - jasny
body {
  --bkg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
	body {
		--bkg-color: black;
		--text-color: white;
	}
}

body {
  background-color: var(--bkg-color);
  color: var(--text-color);
}

Sposób 2: JavaScript

CSS:

// domyślny motyw - jasny
body {
  --bkg-color: white;
  --text-color: black;
}

body.dark {
  --bkg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bkg-color);
  color: var(--text-color);
}

JavaScript:

const darkTheme = window.matchMedia('(prefers-color-scheme: dark)');

if (darkTheme.matches) { // czy użytkownik używa w systemie czarnego motywu?
  document.body.classList.add('dark');
} else {
  document.body.classList.remove('dark');
}

Myszka i obrót

Żeby obrócić obiekt w kierunku, w którym znajduje się kursor myszy, należy obliczyć kąt. Kąt, który znajduje się pomiędzy: dodatnią osią X i linią prostą, którą tworzą dwa punkty: pierwszy punkt to (0, 0), a drugi to: podany (x, y).

W poniższym przykładzie drugi punkt jest obliczany, w następujący sposób:

const y = rect.y - mouse.y + canvasRect.top;
const x = rect.x - mouse.x + canvasRect.left;

gdzie:

rect - To pozycja obracanego obiektu mouse - To pozycja kursora myszy canvasRect - To pozycja płótna

Mając już obliczony punkt, można pobrać informacje o kącie, o jaki powinien zostać obrócony obiekt:

angle = Math.atan2(y, x);

Kąt zwracany jest w radianach.

Przykład

Demo znajdziesz tutaj

HTML:

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

let angle = 0;
const step = 15;
const mouse = { x: 0, y: 0 };

const canvas = document.getElementById('canvas');
const context = canvas.getContext("2d");
const canvasRect = canvas.getBoundingClientRect();
const rect = {
    width: 50,
    height: 50,
    x: context.canvas.width / 2,
    y: context.canvas.height / 2
}

document.addEventListener('mousemove', (e) => {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    const y = rect.y - mouse.y + canvasRect.top;
    const x = rect.x - mouse.x + canvasRect.left;
    angle = Math.atan2(y, x);
});

document.addEventListener('keydown', (e) => {
    rect.x += -step * Math.cos(angle);
    rect.y += -step * Math.sin(angle);
});

const render = () => {
    context.fillStyle = '#000';

    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = '#ff0000';
    context.save();
    context.translate(rect.x, rect.y)
    context.rotate(angle);
    context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);
    context.restore();
    requestAnimationFrame(render);
}
render();

Jak pobrać współrzędne?

Żeby pobrać pozycję kursora myszy, w obrębie Canvas potrzebujesz dwa rodzaje informacji: pozycję kursora i pozycję płótna.

Pozycja (0, 0) oznacza lewy górny róg płótna.

Przykład działającego przykładu znajdziesz tutaj

Przykład

HTML:

<div>
    <strong>X: <span id="x"></span></strong>
    <br>
    <strong>Y: <span id="y"></span></strong>
</div>
<br>
<canvas id="canvas" width="800" height="600"></canvas>

JavaScript:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const x = document.getElementById('x');
const y = document.getElementById('y');

context.fillStyle = '#000';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);

canvas.addEventListener('mousemove', (e) => {
	const canvasRect = canvas.getBoundingClientRect();
	const posX = Math.round(e.clientX - canvasRect.left);
	const posY = Math.round(e.clientY - canvasRect.top);
	x.innerHTML = posX;
	y.innerHTML = posY;
});

Mając informację o pozycji kursora: e.clientX i e.clientY oraz pozycji płótna: canvasRect.left i canvasRect.top możemy obliczyć pozycję kursora w Canvas. Zmienne: posX i posY.