HTML Canvas Context rotate a custom drawing

Description

HTML Canvas Context rotate a custom drawing

View in separate window 

<html>
    <head>
        <script>
            function drawLogo(context){
                // draw Hello Logo! text
                context.beginPath();//from w w  w  . ja v a2s  . c  om
                context.textAlign = "center";
                context.textBaseline = "middle";
                context.fillStyle = "red";
                context.fillText("java2s.com!", 0, 0);
                context.closePath();
                
                // define style for both waves
                context.lineWidth = 4;
                context.strokeStyle = "red";
                
                // draw top wave
                context.beginPath();
                context.moveTo(-30, 10);
                context.bezierCurveTo(-5, 5, 5, 15, 30, 10);
                context.stroke();
                
                // draw bottom wave
                context.beginPath();
                context.moveTo(-30, 15);
                context.bezierCurveTo(-5, 10, 5, 20, 30, 15);
                context.stroke();
            }
            
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                
                // draw 5 randomly transformed logos
                for (var n = 0; n < 6; n++) {
                    context.save();
                    
                    // translate to random position
                    context.translate(n*50, n*50);
                    
                    // rotate by random angle
                    context.rotate(n*0.5);
                    
                    // scale by random size
                    var randSize = n*2;
                    context.scale(randSize, randSize);
                    
                    // draw logo
                    drawLogo(context);
                    context.restore();
                }
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>



PreviousNext

Related