見出し画像

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) あらたなロケットの」をごらんください。

この記事が気に入ったらサポートをしてみませんか?