O Tongyi Thousand Questions lançou um padrão de código que facilita a geração de páginas da Web, e usamos essa capacidade para gerar gráficos cinéticos de trajetória planetária. Uma espécie de ferramenta de substituição plana para o Artifacts. O modo de código é usado principalmente para gerar código, mas depende da biblioteca, o que é muito difícil, não pode ser carregado e não pode ser entendido!LISPsemântica e, portanto, não pode seguir a Diagrama do cartão Palavras-chave Gerar SVG.
pista
Crie um modelo dinâmico do sistema solar mostrando o Sol e os planetas que o orbitam, incluindo Mercúrio, Vênus, Terra, Marte, Júpiter, Saturno, Urano e Netuno. Cada planeta deve ter sua própria órbita e animação de rotação. A Terra deve ter uma lua orbitando ao seu redor. O plano de fundo é um espaço escuro contendo estrelas, que devem ter transparência e tamanhos diferentes. Requisitos: desenhe um modelo do sistema solar usando o elemento , com um tamanho de tela de 600px de largura por 800px de altura, centralizado. O plano de fundo usa um gradiente radial elíptico que vai do azul escuro (#1C2837) ao preto (#050608). Adicione 150 estrelas ao plano de fundo, geradas aleatoriamente, com um tamanho de estrela entre 0,5px e 1px e uma transparência aleatória que varia de 0,5 a 1. As imagens do sol e dos planetas serão carregadas via CDN, usando os seguintes recursos de imagem: Sol: https://img.alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_! !6000000007126-2-tps-800-800.png Mercúrio: https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_! !6000000002300-2-tps-800-800.png Vênus: 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 Lua: https://img.alicdn.com/imgextra/i4/O1CN01Ad5SeB20tv1nfRoA2_! !6000000006908-2-tps-800-800.png Marte: https://img.alicdn.com/imgextra/i1/O1CN01OlZAk81OVEHJ0pazq_! !6000000001710-2-tps-800-800.png Júpiter: 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 Urano: https://img.alicdn.com/imgextra/i1/O1CN01wnxTX51xIPkTHqPBr_! !6000000006420-2-tps-800-800.png Netuno: https://img.alicdn.com/imgextra/i1/O1CN01LTf0rT25zwJWsIDkD_! !6000000007598-2-tps-800-800.png O tamanho da imagem de cada planeta e do Sol deve ser dimensionado de acordo com o tamanho do planeta real. O tamanho do Sol é 60px, as imagens dos outros planetas são dimensionadas proporcionalmente: Mercúrio: 5px Vênus: 8px Terra: 10px Marte: 7px Júpiter: 12px Saturno: 24px Urano: 9px Netuno: 8px O movimento de cada planeta e lua deve ser suave e girar em suas órbitas. Use requestAnimationFrame para suavizar a animação. Cada planeta deve seguir uma órbita elíptica ao redor do sol com o seguinte raio: Mercúrio: 60px Vênus: 90px Terra: 120px Marte: 150px Júpiter: 180px Saturno: 210px Urano: 240px Netuno: 270px A órbita da Terra também deve ser traçada com uma Lua, que gira em torno da Terra. A lua tem um raio de 10px e um raio orbital de 10px ao redor da Terra. Cada planeta gira em uma velocidade diferente, e a posição dos planetas é calculada com base em seu raio orbital e nos métodos Math.cos e Math.sin para simular o movimento dos planetas. Certifique-se de que o movimento de cada planeta tenha uma periodicidade diferente: Mercúrio: rápido, período mais curto, calculado usando ângulo * 4. Vênus: velocidade média, período um pouco mais longo, calculado com o uso do ângulo * 3. Terra: período mais longo, calculado usando o ângulo * 2. Marte: calcular usando o ângulo * 1,5. Júpiter: calcular usando o ângulo * 1. Saturno: calcular usando o ângulo * 0,8. Urano: calcular usando o ângulo * 0,5. Netuno: calcular usando o ângulo * 0,4. Ao desenhar os planetas, use o método ctx.drawImage() para desenhar a imagem na posição correta da órbita, e o tamanho da imagem do planeta pode ser dimensionado. Use os métodos ctx.beginPath() e ctx.arc() para desenhar a órbita de cada planeta, a órbita deve ser uma linha pontilhada e a transparência é 0,2. No canto superior direito da página, há uma linha que diz "Chief AI Sharing Circle", em fonte Song, tamanho 10, alinhada à direita. Estrutura do código: Seção HTML: Use o elemento canvas e defina sua largura e altura para 600px × 800px. Adicione estilos em linha para definir o plano de fundo, a fonte, etc. Seção JavaScript: Carregue todas as imagens dos planetas e do sol, certifique-se de que todas as imagens estejam carregadas e comece a desenhar. Use a matriz stars para armazenar as estrelas geradas aleatoriamente e desenhá-las. Use o método drawSolarSystem() para desenhar todos os elementos, inclusive o sol, os planetas, as órbitas e a lua. O método requestAnimationFrame() é usado para implementar uma animação suave.
