Artifacts/Canvaの代わりに、汎用的な「コードパターン」を使用した惑星軌道マップの生成

Tongyi Thousand Questionsは、ウェブページを簡単に生成するコードパターンをリリースしており、我々はこの能力を使って運動学的惑星軌道ランチャートを生成した。Artifactsのフラットな代替ツールのようなものだ。コードモードは、主にコードを生成するために使用されますが、ライブラリに依存することは非常に困難であり、はるかにロードすることはできませんし、理解することはできません！リスプ意味論に従うことはできない。 カード図解 キュー・ワード SVGを生成する。

手がかり

太陽とその周りを回る惑星（水星、金星、地球、火星、木星、土星、天王星、海王星を含む）を示す太陽系の動的モデルを作成する。それぞれの惑星は、独自の軌道と自転アニメーションを持つべきです。地球にはその周りを回る月があるはずだ。背景は星を含む暗い空間で、透明度と大きさが異なるようにする。

要件：要素を使って太陽系のモデルを描きます。キャンバスのサイズは幅600px、高さ800pxで、中央に配置します。
背景には、濃い青 (#1C2837) から黒 (#050608) に向かう楕円形の放射状グラデーションを使用します。
背景には、ランダムに生成された150個の星を、星の大きさは0.5pxから1pxの間で、透明度は0.5から1の間でランダムに追加します。
太陽と惑星の画像は、以下の画像リソースを使い、CDN経由で読み込む：
太陽: https://img.alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_！!6000000007126-2-tps-800-800.png
水星: https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_！!6000000002300-2-tps-800-800.png
金星: https://img.alicdn.com/imgextra/i3/O1CN01JGEgLU1dfxnVvp91R_！!6000000003764-2-tps-800-800.png Earth: https://img.alicdn.com/imgextra/i4/O1CN01R6wlzD1IhhMlBcGLg_!!6000000000925-2-tps-800-800.png
月: https://img.alicdn.com/imgextra/i4/O1CN01Ad5SeB20tv1nfRoA2_！!6000000006908-2-tps-800-800.png
火星: https://img.alicdn.com/imgextra/i1/O1CN01OlZAk81OVEHJ0pazq_！!6000000001710-2-tps-800-800.png
木星: https://img.alicdn.com/imgextra/i2/O1CN01MA3Mk51bAhWxWxHim_！!6000000003425-2-tps-800-800.png Saturn: https://img.alicdn.com/imgextra/i2/O1CN01NG2FjS1XDDEofNNhg_!!6000000002889-2-tps-800-800.png
天王星: https://img.alicdn.com/imgextra/i1/O1CN01wnxTX51xIPkTHqPBr_！!6000000006420-2-tps-800-800.png
海王星: https://img.alicdn.com/imgextra/i1/O1CN01LTf0rT25zwJWsIDkD_！!6000000007598-2-tps-800-800.png

各惑星と太陽の画像サイズは、実際の惑星のサイズに合わせる。太陽のサイズは60pxで、他の惑星の画像はそれに比例して拡大縮小されます：
水星: 5px
金星: 8px
地球：10px
火星: 7px
木星: 12px
土星: 24px
天王星: 9px
海王星: 8px

それぞれの惑星と月の動きは滑らかで、軌道の中で回転するようにする。アニメーションを滑らかにするにはrequestAnimationFrameを使ってください。各惑星は太陽の周りを以下の半径で楕円軌道を描く：
水星: 60px
金星：90px
地球：120px
火星：150px
木星：180px
土星：210px
天王星：240px
海王星：270px

地球の公転軌道も、地球の周りを公転する月と一緒にプロットする必要がある。月の半径は10pxで、地球の周りの公転半径は10pxである。
それぞれの惑星は異なる速度で自転しており、惑星の位置は公転半径とMath.cosメソッドとMath.sinメソッドに基づいて計算され、惑星の動きをシミュレートする。それぞれの惑星の運動が異なる周期性であることを確認する：
水星：高速、最短周期、角度 * 4 を使って計算。
金星：中速、周期はやや長め、角度 * 3 を使って計算。
地球：周期は長め、角度*2で計算。
火星：角度*1.5を用いて計算。
木星：角度* 1を用いて計算。
土星：角度* 0.8を用いて計算。
天王星：角度* 0.5を用いて計算。
海王星: 角度* 0.4で計算。

惑星を描画する場合、ctx.drawImage()メソッドを使用して軌道の正しい位置に画像を描画する。
各惑星の軌道を描くには、ctx.beginPath()メソッドとctx.arc()メソッドを使用し、軌道は点線とし、透明度は0.2とする。
ページの右上に、"Chief AI Sharing Circle "と書かれた行があり、Songフォント、サイズ10、右揃えで書かれている。

コードの構造
HTMLセクション：
canvas要素を使用し、その幅と高さを600px × 800pxに設定します。
インライン・スタイルを追加して、背景やフォントなどを設定する。

JavaScriptセクション：
惑星と太陽の画像をすべて読み込み、すべての画像が読み込まれたことを確認してから描画を開始する。
配列starsを使ってランダムに生成された星を保存し、描画する。
drawSolarSystem() メソッドを使用して、太陽、惑星、軌道、月を含むすべての要素を描画します。
requestAnimationFrame() メソッドを使用して、スムーズなアニメーションを実装します。