JavaScript (54) 新たなロケットの打ち上げ

H3ロケット初号機の打ち上げは失敗してしまいましたが、失敗から学び、次へとつなげてもらえると思います。

こちらのロケットは、前回のものをアップデートしつつ、いろいろな SVG / SVG.js の機能を試してみました。実行結果とソースコードはこちら。

• SVG().defs().path() で path 要素の円弧と直線を組み合わせたロケットの形を作りました。
• ビスの位置を計算して配置しました。
• 打ち上げ後、左へ90°回転させ、左方向へも移動しているよう星空を移動させました。
• 回転は SVG().use().animate().rotate() を利用。

さて、宇宙への進出の次は、海に進出しようかと思います。

関連項目

• JavaScript (53) ロケットの打ち上げ
• JavaScript (52) グループの利用
• JavaScript (51) 生成したSVGの表示
• JavaScript (50) SVG.jsライブラリを使用
• JavaScript (49) SVGを生成
• JavaScript 目次
• プログラミング講座(168) アニメ