De grondbeginselen van JavaScript: tekening (1 / 7 stap)

Stap 1: Intro aan tekening: Leer de grondbeginselen

Ik wil geen tijd verliezen op kleine praten, dus laten we aan de slag! Maar eerst moet u weten de grondbeginselen van de tekening en hoe te maken van eenvoudige vormen voordat u begint met het maken van uitgebreide vormen. Beginnen is heel eenvoudig; je hoeft alleen te weten de opdrachten. Hier zijn de top commando's die worden gebruikt in bijna elke "tekenen" of "animatie" met behulp van JavaScript.

• rechthoek

Teken een rechthoek door het volgende te doen. (Ik zal uitleggen wat de getallen betekenen een seconde!!!)

rect (200 200 200, 200);

Nu, dit is de opdracht voor het tekenen van het, maar wat betekenen die getallen? Hier is wat ze betekenen:

1. Het eerste nummer is te vinden waar de rechthoek zal worden geplaatst. Kijk naar het eerste beeld. Er zijn drie rode stippen langs de bovenkant, een gelabelde 0, een label 200 en een gelabelde 400. Dus, de linker hoek is 0, de juiste hoek is 400 en het midden is 200. Zo zoekt u uw eerste nummer waar de linkerbovenhoek van de rechthoek zal worden geplaatst. Dus, in het voorbeeld, mijn rechthoek ligt op 200, in het exacte midden van de x-as. De eerste nummer bepaalt waar in de x-as de linkerhoek (boven) gevestigd worden zal, eenvoudig te zijn.
2. Het tweede nummer is te vinden waar op de y-as de linker bovenhoek zal worden. Kijk naar de tweede foto. U zult zien dat er weer drie puntjes zijn. Dit is hetzelfde als het eerste nummer, behalve het gedecodeerd waar de bovenste hoek van de rechthoek zal worden gevestigd, omhoog of omlaag. Dus, nu onze rechthoek zal worden gevestigd in het midden van de pagina, of ten minste de top links hoek zal.
3. Het derde nummer is het eerste nummer dat hoe groot vertelt de rechthoek maken. Dit getal vertelt hoe lang de rechthoek zal zijn. Dus we al weten dat de rechthoek gevestigd op 200 worden zal, 200 of, het midden van de pagina. Nu, zullen onze rechthoek 200 breed en 200 lang zijn.
4. Het vierde getal vertelt hoe lang om te maken van de rechthoek. Dus, het is in ons geval, 200 hoog. Dus we nu 200, 200, 200, 200 hebben. Dus, in plaats van een rechthoek hebben we eigenlijk een vierkant! Maar ik bedoel niet te verwarren u, nu! U kunt de nummers als u wilt wijzigen van het formaat of de positie van de rechthoek wijzigen. Bekijk de derde foto om het plein die we gemaakt. De vierde foto toont een andere rechthoek met de coördinaten van: 10, 40, 20, 75.

Opmerking! **In de derde foto, is de reden waarom u de andere twee lijnen niet ziet omdat ze precies op de regels van het beëindigen van het doek (uw "tekenen" board).

• ellips (cirkel of ovaal)

Ga als volgt te werk om een ellips tekenen. De nummers zal ik binnenkort uitleggen!! (Nu dat je hoe het weet te doen van een rechthoek, het is heel simpel.) ellips (40, 40, 40, 40); De cijfers betekenen het nauwkeurige zelfde ding. x, y, w, h, of, x-as, y-as, breedte, hoogte. Het enige "andere" ding over plaatsen en dimensionering ellipsen in plaats van rechthoeken is dat er is geen hoogste linkerhoek, dus de getallen zijn waar het centrum is gevestigd. u klaar bent met de 'Basics voor de Basics!" Post vragen in de commentaren hieronder, en doorgaan naar de volgende stap. Als er iets is verwarrend, laat het me weten en ik zal vereenvoudigen het!