Generation of planetary trajectory maps using the generic "code model" as a substitute for Artifacts/canva

Tongyi Thousand Questions released a code pattern that makes it easy to generate web pages, and we utilized this ability to generate planetary trajectory run charts for kinetic effects. Sort of a flat replacement tool for Artifacts. Code mode is mainly used to generate code, but depends on the library is very difficult to much can not be loaded, and can not understand theLISPsemantics, and therefore cannot follow the Card Diagram Cue Words Generate SVG.

clue

Create a dynamic model of the solar system showing the Sun and the planets orbiting it, including Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus and Neptune. Each planet should have its own orbit and rotation animation. Earth should have a moon orbiting around it. The background is a dark space containing stars, which should have different transparency and sizes.

Requirements: Draw a model of the solar system using the  element, with a canvas size of 600px wide by 800px high, centered.
The background uses an elliptical radial gradient that goes from dark blue (#1C2837) to black (#050608).
Add 150 stars to the background, randomly generated, with star sizes between 0.5px and 1px and random transparency ranging from 0.5 to 1.
Images of the sun and planets will be loaded via CDN, using the following image resources:
Sun: https://img.alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_! !6000000007126-2-tps-800-800.png
Mercury: https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_! !6000000002300-2-tps-800-800.png
Venus: 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
Moon: https://img.alicdn.com/imgextra/i4/O1CN01Ad5SeB20tv1nfRoA2_! !6000000006908-2-tps-800-800.png
Mars: https://img.alicdn.com/imgextra/i1/O1CN01OlZAk81OVEHJ0pazq_! !6000000001710-2-tps-800-800.png
Jupiter: 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
Uranus: https://img.alicdn.com/imgextra/i1/O1CN01wnxTX51xIPkTHqPBr_! !6000000006420-2-tps-800-800.png
Neptune: https://img.alicdn.com/imgextra/i1/O1CN01LTf0rT25zwJWsIDkD_! !6000000007598-2-tps-800-800.png

The image size of each planet and the Sun should be scaled to the size of the actual planet. Sun size is 60px, images of other planets are scaled proportionally:
Mercury: 5px
Venus: 8px
Earth: 10px
Mars: 7px
Jupiter: 12px
Saturn: 24px
Uranus: 9px
Neptune: 8px

The motion of each planet and moon should be smooth and rotate in their orbits. Use requestAnimationFrame to smooth the animation. Each planet should follow an elliptical orbit around the sun with the following radius:
Mercury: 60px
Venus: 90px
Earth: 120px
Mars: 150px
Jupiter: 180px
Saturn: 210px
Uranus: 240px
Neptune: 270px

The Earth's orbit should also be plotted with a Moon, which revolves around the Earth. The moon has a radius of 10px and an orbital radius of 10px around the Earth.
Each planet rotates at a different speed, and the position of the planets is calculated based on their orbital radius and the Math.cos and Math.sin methods to simulate the motion of the planets. Make sure that the motion of each planet is different periodicity:
Mercury: fast, shortest period, calculated using angle * 4.
Venus: medium speed, slightly longer period, calculated using angle * 3.
Earth: longer period, calculated using angle * 2.
Mars: calculate using angle * 1.5.
Jupiter: calculate using angle * 1.
Saturn: calculate using angle * 0.8.
Uranus: calculate using angle * 0.5.
Neptune: Calculated using angle * 0.4.

When drawing planets, use ctx.drawImage() method to draw the image at the right position of the orbit, and the size of the planet image can be scaled.
Use ctx.beginPath() and ctx.arc() methods to draw the orbit of each planet, the orbit should be a dotted line and the transparency is 0.2.
In the top right corner of the page, there is a line that reads "Chief AI Sharing Circle", in Song font, size 10, right-aligned.

Code structure:
HTML section:
Use the canvas element and set its width and height to 600px × 800px.
Add inline styles to set the background, font, etc.

JavaScript section:
Load all the images of the planets and the sun, make sure all the images are loaded and start drawing.
Use the array stars to store the randomly generated stars and draw them.
Use the drawSolarSystem() method to draw all the elements, including the sun, planets, orbits and moon.
The requestAnimationFrame() method is used to implement a smooth animation.