0

どんな値でも、常にできるだけ速く更新します。

<!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>
4

1 に答える 1

2

式は次のように機能するためです。

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

JavaScript は何か true を見つけるまで左から右に進み、その後中止するため、関数は決して実行されません..

于 2012-10-21T14:31:20.223 に答える