Categorieën Zakelijk
Gratis leerboek

Canvas en SVG – Animaties en vectoren

143
Taal:  Dutch
Wil je knappe illustraties ontwerpen en flitsende animaties voor het internet bouwen? Doe dat meteen, snel en eenvoudig, met bekende technologieën zoals html5, css, JavaScript en xml. Leer het nu!
Download gratis tekstboeken als PDF of lees ze online. Minder dan 15% advertenties.
Het zakelijk abonnement is gratis voor de eerste 30 dagen, daarna$5.99/maand
Beschrijving
Inhoud

Html5 beschikt met de canvas over een krachtige tekentool. Daarmee ontwerpen webbouwers vanuit zuivere html5 en JavaScript mooie, doeltreffende illustraties. Leer in een rasteromgeving tekenpaden maken, vormen tekenen, pennen gebruiken, pas vulkleuren en patronen toe, maak verlopen of teken tekst.

Ontdek verder hoe je clipt, vervormt of effecten toevoegt. Dit boek vertelt je zelfs hoe je bestaande afbeeldingen zoals jpg’s in de canvas kan weergeven. Meer nog, voeg animatie toe, zodat je illustratie bovendien interactief kan worden.

Toch biedt html5 nog meer. Met svg, het boeiende en veelgebruikte afbeeldingsformaat voor het web, bouw je daarenboven sterke vectoriële afbeeldingen. Ook svg kan je op de koop toe animeren. Leer hoe je met html5 en xml klassieke vormen zoals lijnen, cirkels, rechthoeken schetst, maar ook veelvoudige lijnen komen aan bod. Geef je vormen kleur, of voeg transparantie toe.

Kortom, leer illustreren en animeren op maat van de webontwikkelaar!

  • Deel 1 – Keuze technologie
  1. Canvas of svg?
    1. Illustraties
    2. Animaties
    3. Canvas of svg?
  2. Indeling boek
  3. Voorkennis
  4. Objecten
  5. Oefeningen
  • Deel 2 – Canvas
  1. Doelen
  2. Inleiding
    1. Grootte bestanden
    2. Bewerking en interactiviteit
    3. Rasterafbeeldingen
  3. Canvas-container
    1. Html5-structuur
    2. Canvas in body
    3. Identiteit
    4. Opmaak
    5. Samenvatting
  4. Context
    1. Gereedschapskist
    2. Bewaren en ophalen
  5. Paden
    1. Begrip
    2. beginPath()
    3. closePath()
  6. Teksten
    1. Lettertype en grootte
    2. Schrijven
    3. Kleur
    4. Uitlijning
    5. Basislijn
  7. Vullen en omlijnen
    1. Vullen
    2. Omlijnen
  8. Lijnen
    1. Rechte lijn
    2. Kromme
  9. Joins van lijnen
  10. Rechthoeken
    1. Rechthoek
    2. Varianten 7510.3 Uitsnijden
  11. Cirkels
    1. Volle cirkel
    2. Deel cirkel
  12. Clipping
    1. Bewaren
    2. Gastheer
    3. Clip-figuren
    4. Terugkeren
  13. Transformaties
    1. Schalen
    2. Roteren
    3. Vervormen
    4. Verplaatsen
    5. Reset
  14. Afbeeldingen
    1. Laden en tonen
    2. Grootte
    3. Uitsnijden
  15. Effecten
    1. Schaduw
    2. Transparantie
  16. Opslaan als afbeeldingbestand
    1. Code
    2. Browser
  17. Animatie
    1. Frame
    2. JavaScript
    3. requestAnimationFrame()
    4. setInterval()
  18. Oefenen
    1. Checklist
  • Deel 3 – Svg
  1. Doelen
  2. Inleiding
    1. Vectoren
    2. Inkscape
    3. SVG-dom
  3. -container
  4. Vormen
    1. Lijn
    2. Rechthoek
    3. Cirkel
    4. Ellips
    5. Veelhoek
    6. Veelvoudige lijn
  5. Paden
    1. move to
    2. line to
    3. Andere
  6. Teksten
    1. Tekst tekenen
    2. Tekst indelen
  7. Animatie
    1. Transparantie
    2. Vervormen
  8. Oefenen
    1. Checklist
Over de auteur

Joris Geens