HTML5 Game - Rotating an object.

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Rotate

Description

Rotating an object.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        //Draws a bezier curve on a canvas.
        window.onload = function() {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");

            //ANGLE or rotation.
            let angle = 40;/*w ww  . j a  v  a 2s. c o  m*/

            //DRAW surface.
            context.fillStyle = "silver";
            context.fillRect(0, 0, canvas.width, canvas.height);

            //TRANSLATE to rotation point.
            context.translate(canvas.width / 2, canvas.height / 2);

            //DRAW curves.
            drawBezier(angle, "black");
            drawBezier(angle, "deeppink");
            drawBezier(angle, "gold");
            drawBezier(angle, "blue");
            drawBezier(angle, "yellow");
            drawBezier(angle, "teal");
            drawBezier(angle, "chartreuse");
            drawBezier(angle, "magenta");
            drawBezier(angle, "red");
        }
        //BEZIER curve drawing function.
        function drawBezier(angle, color) {
            //ATTRIBUTES.
            context.fillStyle = color;
            context.lineWidth = 7;
            context.shadowOffsetX = 3;
            context.shadowOffsetY = 3;
            context.shadowBlur = 5;
            context.shadowColor = "gray";

            //SHAPE parameters.
            let xStart = 0;
            let yStart = 0;
            let xControl1 = 100;
            let yControl1 = 20;
            let xControl2 = -50;
            let yControl2 = 50;
            let xEnd = 70;
            let yEnd = 70;

            //ROTATE.
            let angleInRadians = angle * Math.PI / 180;
            context.rotate(angleInRadians);

            //STARTING point.
            context.beginPath();
            context.moveTo(xStart, yStart);

            //BEZIER curve.
            context.bezierCurveTo(xControl1, yControl1,
                xControl2, yControl2,
                xEnd, yEnd);
            //DRAW curve.
            context.fill();
        }
    </script>
</head>
<body>
    <div style="width:200px;   height:200px;
                 margin:0 auto; padding:5px;">
        <canvas id="canvasArea" width="200" height="200" style="border:2px solid black">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>

Related Topic