HTML5 Game - Creating Circular Motion

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Flying Along Circle

Description

Creating Circular Motion

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        //Draws circular movement on a canvas.
        window.onload = function() {
            canvasBall = document.getElementById("canvasBall");
            contextBall = canvasBall.getContext("2d");
            canvasBG = document.getElementById("canvasBackground");
            contextBG = canvasBG.getContext("2d");

            //PARAMETERS.
            let xPos = canvasBall.width / 2;
            let change = 20;/*from   w w w.java  2s. co  m*/
            let yPos = canvasBall.height / 2;
            let interval = 50;
            let count = 0;
            let max = 100;
            let radius = 90;

            contextBG.fillStyle = "white";
            contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);

            let ball = new Image();
            ball.src = "http://java2s.com/style/demo/jet.png";

            ball.onload = function() {
                contextBall.translate(xPos, yPos);

                let intervalID = setInterval(drawBall, interval);

                function drawBall() {

                    contextBall.clearRect(-canvasBall.width / 2, -canvasBall.height / 2,
                        canvasBall.width, canvasBall.height);

                    //STOP if reached end.
                    count += 1;
                    if (count > max) {
                        clearInterval(intervalID)
                    };
                    contextBall.rotate(((Math.PI) / 180) * change);
                    contextBall.drawImage(ball, radius, 0);
                }
            }
        }
    </script>
</head>

<body>
    <div>

        <canvas id="canvasBall" width="400" height="400" style="border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 2">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
        <canvas id="canvasBackground" width="400" height="400" style="border:2px solid black;
                 position:absolute; left:auto; top:auto;
                 z-index: 1">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>

Related Topic