Hola, mis queridos amigos, desprecio el frente de mí mismo, escribo blogs por primera vez y no escribo bien, por favor perdóname para que entienda.
Antes de enseñar, creo que eres inteligente. con eso aquí;
¡BUENO! La imagen a continuación es el efecto simple después de nuestra finalización.
1. Defina el lienzoEn primer lugar, ahora insertamos la etiqueta <Canvas> en el archivo HTML para definir el tamaño del lienzo. Al mismo tiempo, el color de fondo del lienzo se establece en la tabla de estilo interno (para ver cuando sea conveniente para dibujar);
<! Canvas {fondo:#5151a2;} </ystye> </head> <body> <Canvas id = Canvas width = 800 Height = 600> </body> </html>El siguiente núcleo es dibujar un molino de viento en el entorno JS nativo; 2D gráficos en el lienzo;
<script type = text/javaScript> // Obtener el contexto 2D de obtener el lienzo.2. Dibuja la base del molino de viento
La figura geométrica de la base del molino de viento parece un trapezoide delgado y delgado. ¡Mira directamente el código ~~!
// Definir una función, la base inferior de la función de muelles de envasado Buttom () {ctx.beginpath (); (0,#CCC); = Linero; Punto de partida CTX.lineto (410,600);Echemos un vistazo al efecto en la página, ¿es simple?
(Siento que soy demasiado ~! ~!)
3. Dibuja las hojasLa siguiente parte será el lugar más crítico en esta animación. ¿También puede tener en su corazón. ¿Cómo se debe dibujar la forma de las hojas? ¿Se pueden copiar y pegar las hojas? La respuesta está bien, ¡hagámoslo!
Análisis de pensamiento:
1) Debido a que la forma de las tres hojas es exactamente la misma, solo necesitamos dibujar una hoja. ¡Solo llámalo la función Bind ()! Intersección ¡Solo llámalo! ¡Por qué! Tu TM es demasiado inteligente
2) Tres hojas tienen un corazón redondo. ¡El método Traduce () se usa aquí, el sistema de coordenadas móviles!
3) El punto más difícil es comprender cómo se realiza la animación aquí, porque el principio de animación afectará la estructura del documento de nuestra pintura: la estructura de las hojas:
En primer lugar, creamos un nuevo entorno de dibujo, lo llamamos entorno 1, dibujamos la primera hoja en el entorno 1; Llamando a la hoja en la ventaja (), dibuje las dos hojas; ;
Si queremos lograr la animación, solo necesitamos rotar el entorno de dibujo 1 de la primera hoja. Intersección Barrage: 6666666
4) ¡Al final, se depuran algunos estilos de apariencia básicos! Tales como gradientes, transparencia, etc.!
Dibujar las hojasCuando pinté esta forma de hoja, fue depurado lentamente.
Aquí declaro una variable var num = 0;, como un parámetro de los cambios en el número de rotación del entorno: ¡entonces veamos el código directamente! Intersección Intersección
Var num = 0; , la rotación del sistema de coordenadas ctx.rotate ((math.pi/180)*num); Liner1.AddColorStop (0,#CCC); la primera vez que CTX.BEGINPATH (); gira 120 ° ctx.save (); 120) // Responder antes del segundo estado (sistema de coordenadas giratorias) // dibujar ctx.beginpath (); CCC); Sistema de coordenadas de traducción) num+= 5;停的变化 ， ****** ********************************************* ************************************************************ ************************************************************ ************************************************************ *****************, cada hoja es un código repetido, aquí hay una función de empaquetado function bind () {ctx.moveto (0,0); 30, -12); 12,30,12); 4. Establecer animaciónEsta parte de la animación es relativamente simple. Intersección Intersección
SetInterval (function () {ctx.clearrect);}, 50);Código fuente: https://github.com/224137748/canvas/blob/master/windmill.html
Lo anterior es todo el contenido de este artículo.