Das ist also sowohl einfach als auch etwas komplizierter als es scheint.
Zunächst einmal gibt es hier meist zusammengeführte Fragen
So erhalten Sie elementbezogene Mauskoordinaten
So erhalten Sie Canvas-Pixel-Mauskoordinaten für die 2D-Canvas-API oder WebGL
Also, Antworten
So erhalten Sie elementbezogene Mauskoordinaten
Ob das Element eine Zeichenfläche ist, die relative Mauskoordinaten für Elemente abruft, ist für alle Elemente gleich.
Es gibt 2 einfache Antworten auf die Frage "Wie man Canvas-relative Mauskoordinaten erhält"
Einfache Antwort # 1 verwenden offsetXundoffsetY
canvas.addEventListner('mousemove', (e) => {
const x = e.offsetX;
const y = e.offsetY;
});
Diese Antwort funktioniert in Chrome, Firefox und Safari. Im Gegensatz zu allen anderen Ereigniswerten offsetXundoffsetY berücksichtigen CSS-Transformationen.
Das größte Problem mit offsetXund offsetYist, dass sie ab 2019/05 bei Touch-Ereignissen nicht mehr vorhanden sind und daher nicht mit iOS Safari verwendet werden können. Sie existieren auf Zeigerereignissen, die in Chrome und Firefox existieren, aber nicht in Safari, obwohl Safari anscheinend daran arbeitet .
Ein weiteres Problem ist, dass sich die Ereignisse auf der Leinwand selbst befinden müssen. Wenn Sie sie auf ein anderes Element oder das Fenster setzen, können Sie die Leinwand später nicht als Bezugspunkt auswählen.
Einfache Antwort # 2 verwenden clientX, clientYundcanvas.getBoundingClientRect
Wenn Sie nicht die nächste einfachste Antwort über CSS - Transformationen ist es egal ist zu rufen canvas. getBoundingClientRect()und subtrahiert links ab clientXund topvon clientYda in
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
});
Dies funktioniert, solange keine CSS-Transformationen vorhanden sind. Es funktioniert auch mit Touch-Ereignissen und damit auch mit Safari iOS
canvas.addEventListener('touchmove', (e) => {
const rect = canvas. getBoundingClientRect();
const x = e.touches[0].clientX - rect.left;
const y = e.touches[0].clientY - rect.top;
});
So erhalten Sie Canvas-Pixel-Mauskoordinaten für die 2D-Canvas-API
Dazu müssen wir die oben angegebenen Werte verwenden und die Größe der angezeigten Leinwand in die Anzahl der Pixel in der Leinwand selbst konvertieren
mit canvas.getBoundingClientRectund clientXundclientY
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const elementRelativeX = e.clientX - rect.left;
const elementRelativeY = e.clientY - rect.top;
const canvasRelativeX = elementRelativeX * canvas.width / rect.width;
const canvasRelativeY = elementRelativeY * canvas.height / rect.height;
});
oder mit offsetXundoffsetY
canvas.addEventListener('mousemove', (e) => {
const elementRelativeX = e.offsetX;
const elementRelativeX = e.offsetY;
const canvasRelativeX = elementRelativeX * canvas.width / canvas.clientWidth;
const canvasRelativeY = elementRelativeX * canvas.height / canvas.clientHeight;
});
Hinweis: Fügen Sie der Leinwand in keinem Fall Auffüllungen oder Ränder hinzu. Dadurch wird der Code massiv kompliziert. Anstatt dass Sie einen Rand oder eine Polsterung wünschen, umgeben Sie die Leinwand in einem anderen Element und fügen Sie die Polsterung und / oder den Rand zum äußeren Element hinzu.
Arbeitsbeispiel mit event.offsetX,event.offsetY
[...document.querySelectorAll('canvas')].forEach((canvas) => {
const ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;
function draw(e, radius = 1) {
const pos = {
x: e.offsetX * canvas.width / canvas.clientWidth,
y: e.offsetY * canvas.height / canvas.clientHeight,
};
document.querySelector('#debug').textContent = count;
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
ctx.fill();
}
function preventDefault(e) {
e.preventDefault();
}
if (window.PointerEvent) {
canvas.addEventListener('pointermove', (e) => {
draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
});
canvas.addEventListener('touchstart', preventDefault, {passive: false});
canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', preventDefault);
}
});
function hsl(h, s, l) {
return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}
.scene {
width: 200px;
height: 200px;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation-duration: 16s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from { transform: translateZ(-100px) rotateX( 0deg) rotateY( 0deg); }
to { transform: translateZ(-100px) rotateX(360deg) rotateY(720deg); }
}
.cube__face {
position: absolute;
width: 200px;
height: 200px;
display: block;
}
.cube__face--front { background: rgba(255, 0, 0, 0.2); transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { background: rgba(0, 255, 0, 0.2); transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { background: rgba(0, 0, 255, 0.2); transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { background: rgba(255, 255, 0, 0.2); transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { background: rgba(0, 255, 255, 0.2); transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { background: rgba(255, 0, 255, 0.2); transform: rotateX(-90deg) translateZ(100px); }
<div class="scene">
<div class="cube">
<canvas class="cube__face cube__face--front"></canvas>
<canvas class="cube__face cube__face--back"></canvas>
<canvas class="cube__face cube__face--right"></canvas>
<canvas class="cube__face cube__face--left"></canvas>
<canvas class="cube__face cube__face--top"></canvas>
<canvas class="cube__face cube__face--bottom"></canvas>
</div>
</div>
<pre id="debug"></pre>
Arbeitsbeispiel mit canvas.getBoundingClientRectund event.clientXundevent.clientY
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;
function draw(e, radius = 1) {
const rect = canvas.getBoundingClientRect();
const pos = {
x: (e.clientX - rect.left) * canvas.width / canvas.clientWidth,
y: (e.clientY - rect.top) * canvas.height / canvas.clientHeight,
};
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
ctx.fill();
}
function preventDefault(e) {
e.preventDefault();
}
if (window.PointerEvent) {
canvas.addEventListener('pointermove', (e) => {
draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
});
canvas.addEventListener('touchstart', preventDefault, {passive: false});
canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', preventDefault);
}
function hsl(h, s, l) {
return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}
canvas { background: #FED; }
<canvas width="400" height="100" style="width: 300px; height: 200px"></canvas>
<div>canvas deliberately has differnt CSS size vs drawingbuffer size</div>