HTML5-Tutorium: Canvas: Hello World 03

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:

Korrektheit: 4 (großteils überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 4 (sehr gut)

HTML-Tutorium Hello World: JavaScript | Canvas | SVG

Inhalt | Teil 1 | Teil 2

Ergebnis: hello.html (SVN-Repository)

HTML5: Hello-<name>-Anwendung mit Canvas

Die in Teil 2 erstellten JavaScript-Dateien der Hello-World-Anwendung werden komprimiert, um die Zugriffszeiten zu beschleunigen.

Neues Projekt anlegen

Legen Sie ein neues Projekt an

1. Datei → Neu → Statisches Web-Projekt
2. Project name: HelloWorldCanvas03 → Fertigstellen

Kopieren Sie die Dateien js/main.js und hello.html in den Ordner WebContent des neuen Projektes.

Erstellen sie in diesem Ordner einen weiteren Ordner css und in diesem eine Datei main.css.

css/main.css

canvas
{
  border-color: #BBBBBB; 
  border-width: 2px; 
  border-style: solid; 
}

CSS- und JavaScript-Dateien komprimieren

1. YUI Compressor (yuicompressor-2.x.x.zip) herunterladen

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
2. Samuel Santos: Combine and minimize JavaScript and CSS files for faster loading
3. YUI Compressor

SVN-Repository-Verweise

• Musterlösung (SVN)