drawing-img

Van Statisch naar Dynamisch: Canvas en SVG verkennen in HTML

HTML & CSS, JavaScript

Gepubliceerd: 12.12.2023

In de wereld van webontwikkeling is het toevoegen van grafische elementen aan HTML-pagina's geëvolueerd van statische afbeeldingen. Twee prominente technieken voor het maken van dynamische graphics zijn Canvas en SVG (Schalbare Vector Graphics). In dit artikel duiken we in de mogelijkheden van beide methoden en onderzoeken we hoe ze kunnen worden gebruikt om de interactiviteit en visuele aantrekkingskracht van webcontent te verbeteren.

Canvas:

Het HTML-canvas-element fungeert als een dynamisch tekentafel waarmee ontwikkelaars grafische elementen dynamisch kunnen maken met JavaScript. Hieronder staan voorbeelden die de creatie van eenvoudige graphics met Canvas illustreren:

Voorbeeld 1: Het Tekenen van een Lijn


   var c = document.getElementById("canvasSquare");
var ctx = c.getContext("2d");

ctx.moveTo(125, 0);

ctx.lineTo(150, 50);
ctx.lineTo(250, 60);
ctx.lineTo(175, 100);
ctx.lineTo(200, 150);
ctx.lineTo(125, 120);
ctx.lineTo(50, 150);
ctx.lineTo(75, 100);
ctx.lineTo(0, 60);
ctx.lineTo(100, 50);
ctx.lineTo(125, 0);

ctx.closePath();
ctx.stroke();
    

Voorbeeld 2: Interactief Tekenen

let el = document.getElementById('drawingCanvas');
  var ctx = el.getContext('2d');
  let isDrawing;
  let inputEl = document.getElementById('canvasData');

  el.onpointerdown = function (e) {
    isDrawing = true;
    ctx.moveTo(e.offsetX, e.offsetY);
  };

  el.onpointermove = function (e) {
    if (isDrawing) {
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    }
  };

  el.onpointerout = el.onpointerup = function () {
    if (isDrawing) {
      isDrawing = false;
      let data = el.toDataURL();
      inputEl.value = data;
    }
  };

  let reset = document.getElementById('drawingCanvasReset');
  reset.onclick = () => {
    ctx.beginPath();
    ctx.clearRect(0, 0, el.width, el.height);
    inputEl.value = null;
  };


SVG:

Scalable Vector Graphics (SVG) is een op XML gebaseerde opmaaktaal voor het weergeven van tweedimensionale grafische elementen. SVG integreert naadloos met andere W3C-standaarden en de elementen kunnen eenvoudig worden geanimeerd. Hieronder staat een voorbeeld van het maken van een eenvoudige SVG-cirkel:

Vergelijking:

Laten we Canvas en SVG vergelijken op basis van belangrijke kenmerken:

Canvas:
  • Resolutieafhankelijk
  • Geen ondersteuning voor gebeurtenishandlers
  • Beperkte mogelijkheden voor het renderen van tekst
  • Geschikt voor grafisch intensieve spellen
  • Resulterende afbeeldingen kunnen worden opgeslagen als .png of .jpg
SVG:
  • Resolutie-onafhankelijk
  • Ondersteuning voor gebeurtenishandlers
  • Ideaal voor toepassingen met grote weergavegebieden (bijv. Google Maps)
  • Langzamere weergave voor complexe graphics (DOM-intensief)
  • Niet geschikt voor speltoepassingen

Conclusie:

Zowel Canvas als SVG bieden krachtige front-end technieken die geschikt zijn voor verschillende toepassingen. Canvas excelleert in dynamische, resolutieafhankelijke graphics en is daarom een uitstekende keuze voor spellen. Aan de andere kant maken de schaalbaarheid en gebeurtenisondersteuning van SVG het ideaal voor toepassingen met grote weergavegebieden. Of je nu interactieve kaarten maakt of meeslepende online spellen, het begrijpen van de sterke punten van Canvas en SVG stelt je in staat om de juiste tool te kiezen voor je webontwikkelingsbehoeften. Blijf op de hoogte voor meer artikelen die geavanceerde technieken en praktische voorbeelden verkennen met Canvas en SVG!

Lees hier onze blogs!

Breid je kennis uit met de 4BIS Blog...

Artificial Intelligence vs Machine Learning: Dit is het verschil

Software-modernisering, kennisbank, Automatisering, Webontwikkeling

Tegenwoordig worden er veel termen door elkaar gegooid. Zo hoor je wel eens over Artificial Intelligence, maar ook over Machine Learning en misschien zelfs Deep Learning. Hierdoor kan het nogal onduidelijk worden wat nu precies de term is die je zoekt...

Lees meer

Integraties: 5 redenen waarom je al je tools wilt koppelen

Software-modernisering, Webontwikkeling, Bedrijfssoftware, kennisbank, Automatisering

Integraties zijn uiterst belangrijk om een soepele samenwerking tussen al uw tools te waarborgen. Helaas gebeurt het nog vaak dat bedrijven sommige activiteiten minder soepel laten verlopen door hun tools niet goed te koppelen. Dit is natuurlijk zonde...

Lees meer

Geen veilige server verbinding: Dit zijn de meest voorkomende verbindingsfouten

kennisbank

Foutmeldingen bij het opzoeken van een website komen vaak voor. Ondanks dat ze vaak gemakkelijk op te lossen zijn, gaat dit nog vaak fout. Zo kan het liggen aan een klein foutje, maar hierdoor kan een verbindingsfout direct voorkomen. Om deze fouten...

Lees meer

En wat kunnen we voor jou betekenen?_

Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!

back to top