Los conceptos básicos de JavaScript: dibujo (1 / 7 paso)

Paso 1: Introducción al dibujo: aprender los conceptos básicos

No quiero perder tiempo en charlar, así que vamos a empezar! Pero, en primer lugar, usted necesita saber lo básico del dibujo y cómo hacer formas sencillas antes de comenzar a hacer formas elaboradas. De partida es muy simple; basta con saber los comandos. Aquí están los comandos principales que se utilizan en casi cada "dibujo" o "animación" mediante el uso de JavaScript.

• rectángulo de

Para dibujar un rectángulo, haga lo siguiente. (Voy a explicar lo que significan los números en un segundo!!!)

Rect (200, 200, 200, 200);

Ahora, este es el comando para el dibujo lo, pero ¿qué significan esos números? Esto es lo que significan:

1. El primer número es localizar donde se ubicará el rectángulo. Mira la primera imagen. Hay tres puntos rojos en la parte superior, un etiquetado 0, uno etiquetado como 200 y un etiquetado 400. Por lo tanto, la izquierda es 0, la esquina derecha es 400, y la media es de 200. Así que su primer número se localiza donde estará situada la esquina superior izquierda de su rectángulo. Así, en el ejemplo, mi rectángulo está situado en 200, en el centro exacto del eje x. El primer número controla donde en el eje x la esquina izquierda (arriba) se ubicará, a ser simple.
2. El segundo número es localizar donde en el eje será la esquina superior izquierda. Mira la segunda foto. Verás que hay tres puntos otra vez. Es el mismo que el primer número, excepto descifra donde se encuentra, hasta o hacia abajo la parte superior del rectángulo. Por lo tanto, ahora nuestro rectángulo estará ubicado en el centro de la página, o al menos la parte superior izquierda esquina voluntad.
3. El tercer número es el primer número que indica cuánto hacer el rectángulo. Este número indica cuánto será el rectángulo. Así que ya sabemos que el rectángulo estará situado en el 200, 200, o el centro de la página. Ahora, nuestro rectángulo tendrá 200 ancho o 200 largo.
4. El cuarto número indica cómo altura hacer el rectángulo. Así, en nuestro caso, que es 200 altos. Así que ahora tenemos 200, 200, 200, 200. Así, en vez de un rectángulo, que realmente tenemos un cuadrado! Pero no quiero confundirte, ahora! Puede cambiar los números para cambiar el tamaño o la ubicación de su rectángulo. Revisa el tercer cuadro para ver la plaza que hicimos. La cuarta foto muestra otro rectángulo con las coordenadas de: 20, 10, 40, 75.

Nota!!!! **En la tercera foto, la razón no ves las otras dos líneas es porque están exactamente en las líneas finales de la lona (el tablero "plano").

• elipse (círculo u óvalo)

Para dibujar una elipse, haga lo siguiente. Voy a explicar los números pronto!! (Ahora que sabes cómo hacer un rectángulo, es bastante sencillo). elipse (40, 40, 40, 40); Los números significan exactamente lo mismo. x, y, w, h, o, eje x, eje y, ancho, alto. Lo único "diferente" de colocación y elipses de tamaño en lugar de rectángulos es que no hay ninguna esquina superior izquierda, por lo tanto, los números son donde se encuentra el Centro . Termine con "Lo básico de lo básico!" Publicar preguntas en los comentarios y continuar en el siguiente paso. Si algo es confuso, me avisan, y a simplificar ti!