CODEWITHSUNDEEP
html
Yoda
Yoda

Reputation: 18068

Why does the image refresh so quickly in HTML5 regardless of what I put for timeout?

no matter what value I will it will always refresh as fast as it can.

<!DOCTYPE html>
<html>
    <head>
        <script>
        var ctx, canvas;



        window.requestAnimFrame = (function(callback) {
            return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            window.msRequestAnimationFrame ||
            function(callback) {
              window.setTimeout(callback, 1000/1 );
            };
      })();

            window.onload = function(){
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');
                //sciana
                drawLine();

            }
            function drawLine(){
            var bok = 400, xw = canvas.width/2, yw = 10, odstep = 10;
            var tX = 10/Math.sqrt(3);
                ctx.save();
                for(var i = xw; i >= xw - bok/2; i-=tX){
                    var r = Math.floor( 255 * Math.random());
                    var g = Math.floor( 255 * Math.random());
                    var b = Math.floor( 255 * Math.random());   
                    ctx.translate(10/Math.sqrt(3), 10);
                    ctx.beginPath();
                    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                    ctx.arc(xw, 0, 6, 0, 2 * Math.PI, false);
                    ctx.fill(); 
                    ctx.closePath();

                }   
                ctx.restore(); 
                ctx.save();
                    for(var i = xw; i >= xw - bok/2; i-=10/Math.sqrt(3)){
                    var r = Math.floor( 255 * Math.random());
                    var g = Math.floor( 255 * Math.random());
                    var b = Math.floor( 255 * Math.random());   
                    ctx.translate(-10/Math.sqrt(3), 10);
                    ctx.beginPath();
                    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                    ctx.arc(xw, 0, 6, 0, 2 * Math.PI, false);
                    ctx.fill(); 
                    ctx.closePath();
                }   
                ctx.restore();
                ctx.save();
                xw = xw - bok/2 ;
                yw = bok*Math.sqrt(3)/2;
                for(var i = xw; i <= xw + bok; i+=10){
                    var r = Math.floor( 255 * Math.random());
                    var g = Math.floor( 255 * Math.random());
                    var b = Math.floor( 255 * Math.random());   
                    ctx.translate(10,0);
                    ctx.beginPath();
                    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                    ctx.arc(xw, yw, 6, 0, 2 * Math.PI, false);
                    ctx.fill(); 
                    ctx.closePath();
                }
                ctx.restore();
                requestAnimFrame(drawLine);             
            }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0">
            Twoja przeglądarka nie obsługuje elementu Canvas.
        </canvas>
    </body>
</html>

Upvotes: 0

Views: 161

Answers (1)

tobspr
tobspr

Reputation: 8376

Because expressions work like this:

return true || false || function()  {
// do something
};

The function will never get executed because JavaScript goes from left to right until it finds something true and then aborts ..

Upvotes: 2

Related Questions