Canvas en SVG – Animaties en vectoren

Beoordeling :
( 0 )
143 pages
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!
Dit is een e-boek voor studenten
Meld je aan voor gratis toegang
Titels voor studenten zijn altijd gratis. Minder dan 15% advertenties
 
Gratis 30 dagen uitproberen
Het zakelijk abonnement is gratis voor de eerste 30 dagen, daarna$5.99/maand
Recente aanwinst
Over de auteur

Joris Geens doceert toegepaste informatica voor de grafische sector, interactief programmeren, interactieve animatie en server side scripting aan de Technische Scholen Mechelen in het Belgische Mechelen. Met veel enthousiasme wijdt hij daar studenten in de mysteries van het internet in.

Onder...

Description
Content

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