Estoy tratando de hacer diferentes imágenes, moverme en un camino circular. Quiero que responda en todos los tamaños de pantalla, por favor, ¿cómo puedo hacerlo? Puede usar un div con un color para mostrar un ejemplo de cómo hacer que el código funcione
solo soy un novato, pero con mi conocimiento de inglés basura, creo que necesitas algo como esto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page title</title> </head> <body> <div> /* Declare canvas screen */ <canvas style="border: solid 3px" id="the-canvas" width="300" height="400"></canvas> </div> /* Script*/ <script> /*Declare value to Interactive with canvas*/ addEventListener('load', function() { var x = document.getElementById("the-canvas"); var y = x.getContext("2d"); /* x and y is value declare canvas in js*/ var imageObject = new Image(); /*Image object is the thing to Contain image you want draw*/ var step = 0, radius = 50, speed = 0.05; /* This is r of circle, step for howmany time image go, speed is speed*/ /* Function for spin image around*/ function spin() { /*Clearrect to clear canvas and print new image in new place*/ y.clearRect(0, 0, x.width, x.height); /* 0 0 is start of canvas it base on axis and Used for all canvas commands x.width and x.height is canvas width height*/ y.drawImage(imageObject, 100 + radius * Math.cos(speed * step), 200 + radius * Math.sin(speed * step)); ++step; } /*This function make draw image and change Coordinates every time with cos sin (need math knowledge)*/ imageObject.onload = function() { y.drawImage(imageObject, 100, 200); /* Fps is frame per second*/ setInterval(spin, 50); // 20 fps }; /*This is path to image in you rom*/ imageObject.src = "picturepath"; }); </script> </body> </html>Este código llamado Canvas es muy útil, intente cambiar el alto y el ancho y la ruta de la imagen.