path(パス)要素(ようそ)使(つか)ってみた

前回ぜんかいのロケットをいろいろ改良かいりょうしてみました。改良点かいりょうてんは以下いかの通とおりです。

• ロケット頭部とうぶを円弧えんこに変更へんこうしました。

• ロケットの高たかさを変更へんこうできるようにしました。

• ロケットを左ひだりに90°回転かいてんするようにしました。

• 横方向よこほうこうへの移動いどうを加くわえました。

新あらたなロケット

    //  <path d="M22,96
    //    A595,204 0 0 1 92,0
    //    A595,204 0 0 1 162,96
    //    V239
    //    H22
    //    V96"
    //    style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
    rocket.path(`M22,96 A595,204 0 0 1 92,0 A595,204 0 0 1 162,96 V${239 + dh} H22 V96`).fill('#6e6e6e').stroke({color: '#000', width: 2});

上うえのコードはロケットの形かたちを作つくっているところです。pathパス 要素ようそで円弧えんこ (Aエー) と直線ちょくせん (Vブイ, Hエイチ) を繋つないでいます。

詳細しょうさいはブログ「JavaScript (54) 新あらたなロケットの打うち上あげ」をご覧らんください。