Как я могу автоматически сжимать и расширять изображение при его перемещении?
В настоящее время я автоматически перемещаю изображение с помощью отдельной функции. Однако в этом случае другая функция - сжатие и расширение изображений - работать не будет. Как мне лучше связать их все вместе?
Примечание: я использую код другого разработчика, поэтому я использую его / ее ресурсы в качестве справки
Ссылка: расширение / сжатие изображения с помощью javascript?
HTML:
<html>
<head>
<title>Interactive Image of TUP LOGO
</title>
<style>
* {margin:0; padding: 0; color:white;}
</style>
</head>
<body style="background-color:black;">
<canvas id="background monitor"></canvas>
<script src="js/app.js"></script>
<div id="digital-clock" style="margin-left: 500px; left: auto; right: 170px; bottom: 400px; font-size: 40px;"></div> <br> <br>
<audio autoplay = "" loop = "" src = "undertale.mp3" type = "audio/mpeg" > </audio>
</body>
</html>
JavaScript:
let speed = 20; // speed movement
let scale = 0.17; // we put the standard size for 1080p Monitor
let canvas; // this is the platform where the image move
let context;
let tuplogo = {
x: 200,
y: 300,
xspeed: 5,
yspeed: 5,
img: new Image()
}; // option for the image for speed, movement and sizes
// This function serves as the image information and linking the image in the code
(function main(){
// background
canvas = document.getElementById("background monitor");
context = canvas.getContext("2d");
// insert of the immage
tuplogo.img.src = 'tuplogo.png';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
expand();
update();
})();
// This is the image that can move diagonally and send signal when image approach the limit of the screen canvas
function update() {
setTimeout(() => {
//This is where the background is form
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillRect(tuplogo.x, tuplogo.y, tuplogo.img.width*scale, tuplogo.img.height*scale);
context.drawImage(tuplogo.img, tuplogo.x, tuplogo.y, tuplogo.img.width*scale, tuplogo.img.height*scale);
//Movement of the LOGO (TUP LOGO)
tuplogo.x+=tuplogo.xspeed;
tuplogo.y+=tuplogo.yspeed;
//updating the movement for errors encounter during movement or if the image hit the canvas
checkHitBox();
update();
}, speed)
}
// this function is for the movement of the image can be loop and move infinitely
var originalImgWidth = 0;
// this function expand () to function shrink () this is my main problem the image should be resizing while moving.
function expand() {
originalImgWidth = tuplogo.img.width;
update();
exp();
}
function exp() {
if(window.innerWidth > tuplogo.img.width * 1.1){
tuplogo.img.width = tuplogo.img.width * 1.1;
setTimeout("exp()",500);
}
else
setTimeout("shrink()",500);
}
function shrink() {
if(originalImgWidth < tuplogo.img.width){
tuplogo.img.width = tuplogo.img.width / 1.1;
setTimeout("shrink()",500);
}
else{
setTimeout("exp()",500);
}
}