WebGLアニメーション

詳細
アニメの本があります.すばやくめくると、中の内容が動いているのが見えます.コンピューターアニメーションとこの差は多くなく、アニメーション領域内で古い画像の代わりに新しい画像を使うことで、急速に変化し続け、視覚的な一時的な現象によって私たちの脳の中でアニメーションを形成しました.
 
HTML 5では、次の文で画面の変更を実現します.
 

window.requestAnimationFrame()

それとも愚かな顔をしているのか.まずコードで最初の話を翻訳しましょう.

    
    
    
    
    
    
    
        <!--
        var cv, ctx;
        function init() {
            //1.   canvas  
            cv = document.getElementById("cv");
            //2.   2D   
            ctx = cv.getContext('2d');
            //3.           
            //4.        
            window.requestAnimationFrame(animation)
        }

        function animation() {
            //1.        
            removePrevFrame();
            //2.        
            newFrame();
            //3.      
            window.requestAnimationFrame(animation)
        }
        function removePrevFrame() {
            //    ，        clearRect
            ctx.clearRect(0,0,300,300);
        }
        function newFrame() {
            //             
        }
        //-->
    
    



    

まず,init法によりbodyのonloadイベントにバインドし,webglキャンバス全体と他の初期化を実現した.中の肝心な第4点、windowを使います.requestAnimationFrame文は、画面のリフレッシュを実現するために使用されます.この文には、パラメータがコールバック関数であり、この関数でリフレッシュロジックを実現します.ここでは、animationメソッドの実装を記述します.このコールバック方法は通常、冷蔵庫のドアを開けて、元の象を出します(読者:人の話をします.作者:注釈を見てください).はい、本題に戻りますが、簡単ではありませんか.この考え方に基づいて、私たちはこのコードを改善して、秒針--回転する金のカチューシャを描きます.
 

    
    
    
    
    
    
    
        <!--
        var cv, ctx;
        var lastSeconds;

        function init() {
            //1.   canvas  
            cv = document.getElementById("cv");
            //2.   2D   
            ctx = cv.getContext('2d');
            //3.           
            //4.        
            window.requestAnimationFrame(animation)
        }

        function animation() {
            //1.        
            removePrevFrame();
            //2.        
            newFrame();
            //3.      
            window.requestAnimationFrame(animation)
        }

        function removePrevFrame() {
            //    ，        clearRect
            //      ，           
            ctx.save();
            ctx.clearRect(0, 0, 400, 400);
        }

        function newFrame() {
            //             
            var now = new Date();

            ctx.translate(200, 200);
            var sec = now.getSeconds();
            //        ，       200，200    
            ctx.save();
            ctx.rotate(sec * Math.PI / 30); //360 * sec / 60 * Math.PI / 180
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(150, 0);
            ctx.stroke();
            //     ，                  
            ctx.restore();
            ctx.restore()
        }
        //-->
    
    



    

効果は次のとおりです.
 
秒針が回る線
原文住所:http://blog.techcave.cn/2017/09/14/WebGL-%E5%8A%A8%E7%94%BB/