'How do i make different images move in a circular path

i am trying to make different images , move in a circular path . I want it to be responsive at all screen sizes , pleaase how can i do so . You can use a div with a color to show an example of how to make the code work

javascriptcsssassgsap


Solution 1:[1]

im just a noob but with my trash english knowledge i think you need something like this

    <!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>

This code called Canvas very useful try change heigh and width and picture path

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions