canvasのいくつかの小さな知識の記録

最近canvas関連の機能をして、いくつかの問題に出会って、この文章を書いて自分がcanvasに対して熟知していないいくつかの知識点を記録します
1.canvas回転
canvas回転ブラシは、rotateメソッドを使用できます.rotateメソッドは中心点の周りを回転します.中心点のデフォルトは左上隅の(0,0)位置です.translateメソッドを使用して回転の中心点を変えることができます.以下、2つの方法を紹介します.自分のニーズに合わせて使用することができます.肝心なのは回転の原理を理解することです.
1.回転方法1
この方法は、中心点を矩形の中心に平行移動してから回転し、中心点を原点(0,0)に平行移動し、前の位置と大きさで中心を中心に回転した図形を描画します.この方法では、復元する前にrotateを呼び出す位置の周りに描画されたものが回転します.

  
  
  



  
  
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let width = canvas.width;
    let height = canvas.height;

    //      
    const x = 100;
    const y = 100;
    const rectWidth = 400;
    const rectHeight = 200;
    //         
    var grd = ctx.createLinearGradient(100, 100, 500, 100);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.fillRect(x, y, rectWidth, rectHeight);

    //            
    let tx = x + rectWidth / 2;
    let ty = y + rectHeight / 2;
    //        
    ctx.translate(tx, ty);
    //   90 
    ctx.rotate(Math.PI / 2);
    // //         
    // var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2);
    // grd.addColorStop(0, "red");
    // grd.addColorStop(1, "blue");
    // ctx.fillStyle = grd;
    // //         ，   ，          ，            ，     x y
    // ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
    // //     
    // ctx.rotate(-Math.PI / 2);
    //       
    ctx.translate(-tx, -ty);
    //         
    ctx.fillRect(x, y, rectWidth, rectHeight);

    //          ，          
    ctx.translate(tx, ty);
    ctx.rotate(-Math.PI / 2);
    ctx.translate(-tx, -ty);


  

2.回転方法2
この方法は、中心点を矩形の中心に移動してから回転、描画して元の状態に戻す方法ですが、描画した位置や距離などは再計算する必要があります

  
  
  



  
  
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let width = canvas.width;
    let height = canvas.height;

    //      
    const x = 100;
    const y = 100;
    const rectWidth = 400;
    const rectHeight = 200;
    //         
    var grd = ctx.createLinearGradient(100, 100, 500, 100);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.fillRect(x, y, rectWidth, rectHeight);

    //            
    let tx = x + rectWidth / 2;
    let ty = y + rectHeight / 2;
    //        
    ctx.translate(tx, ty);
    //   90 
    ctx.rotate(Math.PI / 2);
    //        
    var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    //         ，   ，          ，            ，     x y
    ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
    //     
    ctx.rotate(-Math.PI / 2);
    //       
    ctx.translate(-tx, -ty);