Я хочу показать увеличенное изображение на холсте, когда вы наводите курсор на изображение. Таким образом, у меня есть тег <img>, который установлен на 100% ширины и высоты.
Это код, который я написал -
<!DOCTYPE html>
<html>
<head>
<title>sdfsdf</title>
</head>
<style type="text/css">
* {
padding: 0px;
height: 0px;
}
.overlay {
position: fixed;
z-index: 1000000000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
cursor: crosshair;
overflow: hidden;
background: black;
}
.overlay img {
width: 100%;
height: 100%;
}
canvas {
position: absolute;
bottom: 0;
right: 0;
width: 180px;
height: 140px;
border: 1px solid red;
}
</style>
<body>
<div class="overlay">
<img src="test.png" id="img"/>
<canvas id="canvas"><canvas>
</div>
</body>
<script type="text/javascript">
const scale = 10;
const canvas = document.getElementById("canvas");
const img = document.getElementById("img");
canvas.width = 180;
canvas.height = 140;
const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false;
let mx = 0, my = 0;
img.addEventListener("mousemove", event =>
{
mx = event.clientX;
my = event.clientY;
});
const image = new Image();
function loop()
{
context.clearRect(0, 0, canvas.width, canvas.height);
const imgX = - mx * scale + canvas.width / 2;
const imgY = - my * scale + canvas.height / 2;
const imageWidth = image.width * scale;
const imageHeight = image.height * scale;
context.drawImage(image,
imgX,
imgY,
imageWidth,
imageHeight);
requestAnimationFrame(loop);
}
image.onload = () =>
{
requestAnimationFrame(loop);
}
image.src = "test.png";
</script>
</html>
Это прекрасно работает, и изображение центрируется на холсте. Но это нарушается, когда страница увеличивается / уменьшается, изображение никогда не центрируется, и возникает странное смещение. Я попробовал кучу вещей, чтобы компенсировать смещение, но ни один из них не должен работать идеально.
Спасибо!