canvasのtransform(3)

3687 ワード
先端 httml 5 javascript
  • canvasのtransformには、translate、scale、rotateの3つのプロパティがあります.skew
    • はありません.
  • はtransformの実行順序と同様に、これも後書きの属性が先に実行する、すなわち後から
    • を実行する.
    canvasのtransformの例:回転矩形
  • まずcanvasキャンバスの回転中心は左上隅にあるので、矩形の回転中心と左上角を重ね合わせる必要があります.例えば、元の矩形の座標はx:300、y:200、矩形の幅はw:200、h:150です.では、矩形の中心をキャンバスの左上隅:x:-w/2=-100、y:-h/2=75に描く必要があります.次にキャンバスを元の座標x:300+100=300200+75=275に移動します.ここでキャンバスを回転させ、キャンバスを移動させますが、書くときは移動を書き、書くときは回転を書きます.
  • 同じように、描く前に全部クリアする必要があります.そして描き直して、クリアして、描き直して、このように繰り返して、角度が絶えず変化しているので、最後にアニメーションの効果があります
  • また、再描画をクリアする前に、前回の描画状態を保存し、今回の描画状態の上で次のステップを描く必要があります.そうしないと、ループは1つの場所で再描画されます.

    • コードを貼り付けて、原理はこのようにして、しかし正直に言って、このコードは私はあまり理解していません(̄_̄||)objです.save()とobj.resatore()という場所で、どの大神が説明できるのか.
    



    
    
    
    Document
    
    
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            function d2a(n) {//     
                return n * Math.PI / 180;
            }
            function a2d(n) {//     
                return n * 180 / Math.PI;
            }
            let r=0;

            requestAnimationFrame(next);

            function next() {
                
                gd.clearRect(0, 0, c1.width, c1.height);

                gd.save();//         
                gd.translate(500, 275);
                gd.rotate(d2a(r++));
                gd.strokeStyle='orange';
                gd.strokeRect(-100, -75, 200, 150);
                gd.restore();//            

                requestAnimationFrame(next);
            }
        }

    次は、複数の長方形を回転させることができます.
    



    
    
    
    Document
    
    
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');

            function d2a(n) {//     
                return n * Math.PI / 180;
            }
            function a2d(n) {//     
                return n * 180 / Math.PI;
            }

            let datas = [
                { x: 300, y: 300, w: 200, h: 100, s: 1 },
                { x: 200, y: 100, w: 100, h: 50, s: 1 },
                { x: 250, y: 50, w: 50, h: 100, s: 5 }
            ];//    ，s  speed，    


            requestAnimationFrame(next);
            let r=0;
            function next() {
                gd.clearRect(0, 0, c1.width, c1.height);//    
                
                datas.forEach(data => {
                    
                    gd.save();//         

                    gd.translate(data.x, data.y);
                    gd.rotate(d2a(r++*data.s/10));//        
                    gd.strokeStyle = 'orange';
                    gd.strokeRect(-data.w / 2, -data.h / 2, data.w, data.h);
                    gd.restore();//            

                });
                requestAnimationFrame(next);
            }

        }
    MySQL-4 MySQLデータベースのインストール(二)
    HTML 5携帯カメラを呼び出して写真を撮る