HTML5 Game - Moving a circle linearly from the left of the Canvas to the right.

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Linear Motion

Description

Moving a circle linearly from the left of the Canvas to the right.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        window.onload = function() {
            canvasC = document.getElementById("canvasCircle");
            contextC = canvasC.getContext("2d");
            canvasBG = document.getElementById("canvasBackground");
            contextBG = canvasBG.getContext("2d");

            let xPos = 50;/*from   ww w  .  ja va  2s.  c  o  m*/
            let yPos = canvasC.height / 2;
            let radius = 40;
            let endXPos = canvasC.width - 75;
            let change = 10;
            let startAngle = (Math.PI / 180) * 0;
            let interval = 80;
            let endAngle = (Math.PI / 180) * 360;

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

            let intervalID = setInterval(drawCircle, interval);

            function drawCircle() {
                contextC.strokeStyle = "red";
                contextC.lineWidth = 4;
                contextC.shadowOffsetX = 3;
                contextC.shadowOffsetY = 3;
                contextC.shadowBlur = 5;
                contextC.shadowColor = "gray";

                xPos += change;

                if (xPos > endXPos) {
                    clearInterval(intervalID)
                }
                contextC.beginPath();
                contextC.arc(xPos, yPos, radius, startAngle, endAngle, true);
                contextC.stroke();
            }
        }
    </script>
</head>

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

</html>

Related Topic