JavaScript is een populaire programmeertaal gebruikt voor het maken van client-kant scripts moeten worden uitgevoerd in een website. Het is een veelzijdige taal die kan worden gebruikt voor het ontwikkelen van dynamische websites met verbeterde en interactieve user interfaces. De onlangs vrijgegeven HTML 5 introduceerde het doek element, een onderdeel dat kan worden gebruikt voor het maken van 2D-vormen en bitmapafbeeldingen. JavaScript kan worden gebruikt voor het tekenen van een object, zoals een boom, met behulp van de canvas-element.
Open uw favoriete webbrowser en ga naar "codediesel.com/javascript/drawing-trees-in-canvas." Klik op de link "Download bron" en het archief opslaan op uw vaste schijf. Klik met de rechtermuisknop op het archief, selecteer "Alles uitpakken" van het resulterende menu en selecteer een map waarnaar u de inhoud van het archief zullen uitpakken.
Open een teksteditor, zoals Kladblok of WordPad, om te beginnen met het maken van een nieuwe HTML-webpagina.
De startpagina op de gebruikelijke manier, door het invoegen van deze regels:
Geef de pagina een titel met behulp van de title-tag, zoals dit:
JavaScript Canvas boom U kunt "JavaScript Canvas Tree" vervangen door een andere titel.
Definiëren en laden van het script door het invoegen van deze regel:
De "algoTree.js" is een script ontwikkeld om u te helpen trekken bomen met behulp van de HTML 5-doek.
Einde van de sectie "head" en start de sectie "body" van de HTML-pagina door deze twee regels ingevoegd:
Definiëren van het canvas-element en het script type met behulp van deze twee lijnen:
Controleer of de code voor eventuele fouten. Op dit punt, uw document ziet er als volgt:
JavaScript Canvas boom Selecteer het opslaan van het tekstbestand en typ ".html" in het vak "Bestandsnaam" achter de naam van uw webpagina, het document opslaan als een HTML-bestand. Opslaan in de map waar u de inhoud van het archief uitgepakt. De "algoTree.js" ligt in die map.
Het HTML-bestand en het "algoTree.js" script uploaden naar een webhost en test de webpagina.
