Question

在移动图像时如何自动缩小和扩展图像？

我目前已经使用单独的功能自动完成了图像移动。但是，以这种方式执行的另一个功能（缩小和扩展图像）将不起作用。如何更好地将它们链接在一起？

注意：我使用其他开发人员的代码，因此我将他/她的资源用作参考

参考：expanding/shrinking image using 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);
    }
}

移动图像时自动调整图像大小

0 个答案: