テーブルから多角形を描画するロジック（回転のロジックつき）

テーブルから多角形を描画するロジック

var ctx;

WIDTH  = 640;
HEIGHT = 480;

VIEW_WIDTH  = 640;
VIEW_HEIGHT = 480;

var ofsx = 0,ofsy = 0;
var dfsx = 0,dfsy = 0;
var wofsx = 250,wofsy = 0;
var mgf = 1;
var fmgf = 1;

ANGLE = 30;

var bordcolor = ["white", "silver", "gray"];
var wkcolor = 0;

var polygonzh = [ [ 35, 40 ], [ 65, 40 ], [ 60, 80 ], [ 40, 80 ] ];

var polysu = 4;

 

function init(){
    canvas = document.getElementById('world');
    canvas.width = VIEW_WIDTH ;
    canvas.height = VIEW_HEIGHT;
    ctx = canvas.getContext('2d');
    ctx.font = "48px 'MS　Pゴシック'";

    user = window.navigator.userAgent.toLowerCase();

    ctx.fillStyle = '#ff0000';
    ctx.fillRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT);

      fsw = 1;
      for(i=0;i<polysu;i++){
        if(fsw === 1){
            wkcolor = 1;
            ctx.beginPath();
            ctx.moveTo(polygonzh[i][0]*mgf+dfsx,polygonzh[i][1]*mgf+dfsy);
            fsw = 0;
        } else {
            ctx.lineTo(polygonzh[i][0]*mgf+dfsx,polygonzh[i][1]*mgf+dfsy);
        }
      }
//全て座標を指定（胸）
       ctx.closePath();
       ctx.fillStyle = bordcolor[wkcolor];
       ctx.fill();

 

//多角形の回転

function angle_draw(){
    vBase1_c = Math.cos(ANGLE*(Math.PI/180));
    vBase1_s = Math.sin(ANGLE*(Math.PI/180));

      fsw = 1;
      for(i=0;i<polysu;i++){
        x = polygonzh[i][0]*mgf+dfsx;
        y = polygonzh[i][1]*mgf+dfsy;
        xd =  parseInt(x * vBase1_c - y * vBase1_s);
        yd =  parseInt(x * vBase1_s + y * vBase1_c);

        if(fsw === 1){
            wkcolor = 1;
            ctx.beginPath();
            ctx.moveTo(xd, yd);
            fsw = 0;
        } else {
            ctx.lineTo(xd,yd);
        }
      }
//全て座標を指定（胸）
       ctx.closePath();
       ctx.fillStyle = bordcolor[wkcolor];
       ctx.fill();

}

 

 

座標の回転②

AiとAjからなる回転後のX’、ｙ’の値は、それぞれのｘ軸、ｙ軸の値を足す。

Ai=(cosθ，sinθ)　　Aj=(cos(θ+π/２),sin(θ+π/２)）

座標ｘ,ｙをθ度回転して出来るｘ’,ｙ’は

ｘ’=ｘcosθ+ｙcos(θ+π/２)　　ｙ’=ｘsinθ+ｙsin(θ+π/２)

cosはｘ軸　sinはｙ軸

これを言い換えると

ｘ’=ｘcosθ－ｙsinθ　　ｙ’=ｘsinθ+ｙcosθ

（π/２＝90度を超えるとcosとsinが逆転する）

に成ります。

どちらも同じ答えを得ることが出来ます。

座標の回転①

１）基底ベクトルを考えます。

・基底ベクトルは、ｉ：(1,0)、ｊ：(0,1)です。

２）基底ベクトルがθ度の回転した時のベクトルを考えます。

・Ai：（cosθ,sinθ)、Aj：(cos(θ+π/２),sin(θ+π/２))です。=(-sinθ,cosθ)