Olá, meus queridos amigos, eu desprezo o front -end de mim mesmo, escrevo blogs pela primeira vez e não escrevo bem, por favor me perdoe para entender.
Antes de ensinar, acho que você é inteligente. com isso aqui;
Okey! A imagem abaixo é o efeito simples após a conclusão.
1. Defina telaPrimeiro de tudo, agora inserimos a tag <Canvas> no arquivo html para definir o tamanho da tela. Ao mesmo tempo, a cor de fundo da tela é definida na tabela de estilo interno (para assistir quando é conveniente para desenho);
<! Canvas {Background:#5151A2;} </style> </head> <body> <canvas ID = Lidth = 800 Hight = 600> </body> </html>O próximo núcleo é desenhar um moinho de vento no ambiente JS nativo; Gráficos 2D na tela;
<Script Type = Text/JavaScript> // Obtenha o contexto 2D de obter a tela.2. Desenhe a base do moinho de vento
A figura geométrica da base do moinho de vento parece um trapezóide esbelto e esbelto. Olhe diretamente para o código ~~!
// Defina uma função, a base inferior da função de moinho de vento de embalagem buttom () {ctx.beginpath (); (0,#ccc); = Liner; Linha de desenho de partida CTX.LINETO (410.600);Vamos dar uma olhada no efeito na página, é simples?
(Sinto que sou um pouco demais ~! ~!)
3. Desenhe as folhasA próxima parte será o lugar mais crítico nesta animação. Também pode ter em seu coração. Como a forma das folhas deve ser desenhada? As folhas podem ser copiadas e coladas? A resposta certamente está bem, vamos fazer isso!
Análise de pensamento:
1) Como a forma das três folhas é exatamente a mesma, precisamos apenas desenhar uma folha. Basta chamá -lo de função bind ()! Interseção Apenas chame! Por que! Sua TM é muito inteligente
2) Três folhas têm um coração redondo. O método TRANSTE () é usado aqui, o sistema de coordenadas móveis!
3) O ponto mais difícil é entender como a animação é realizada aqui, porque o princípio da animação afetará a estrutura do documento de nossa pintura: a estrutura das folhas:
Primeiro, criamos um novo ambiente de desenho, chamamos de ambiente 1, desenhamos a primeira folha no ambiente 1; Chamando a folha na vantagem (), desenhe as duas folhas; ;
Se queremos alcançar a animação, precisamos apenas girar o ambiente de desenho 1 da primeira folha. Interseção Barragem: 6666666
4) No final, alguns estilos básicos de aparência são depurados! Como gradientes, transparência, etc.!
Desenhe as folhasQuando eu pintei essa forma de folha, eu estava lentamente depurada.
Aqui, declaro uma variável var num = 0;, como um parâmetro das alterações no número de rotação do ambiente: então vamos ver o código diretamente! Interseção Interseção
Var = 0; , a rotação do sistema de coordenadas ctx.rotate ((Math.pi/180)*num); Liner1.addcolorsstop (0,#ccc); a primeira vez que Ctx.BeginPath (); gira 120 ° Ctx.Save (); 120); // Responder antes do segundo estado (sistema de coordenação rotativo) // desenhe ctx.beginpath (); CCC); Sistema de coordenadas de tradução) num+= 5;停的变化 ， ****** ****************************************** **************************************************** **************************************************** **************************************************** ***************, Cada folha é repetida, aqui está uma função de embalagem de função bind () {ctx.moveto (0,0); 30, -12); 12,30,12); 4. Defina a animaçãoEsta parte da animação é relativamente simples. Interseção Interseção
SetInterval (function () {ctx.clearrect);}, 50);Código fonte: https://github.com/224137748/canvas/blob/master/windmill.html
O acima é todo o conteúdo deste artigo.