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...

Wat kosten API koppelingen?

Webontwikkeling, Software modernisering, Bedrijfssoftware, Managed Hosting, Saas

API-koppelingen zijn essentieel voor een naadloze integratie tussen softwaresystemen, maar het bepalen van de kosten voor het creëren van een API kan complex zijn. In deze gids leggen we de belangrijkste factoren uit die de kosten van API-ontwikkeling...

Lees meer

5 tips om de juiste software ontwikkelaar te vinden

Webontwikkeling, Software modernisering, Ecommerce / Webshop, Bedrijfssoftware, PHP, MySQL, HTML & CSS

Ontdek 5 essentiële tips om de juiste software ontwikkelaar te vinden, van prijs-kwaliteitverhouding tot locatie en ervaring. Lees onze handige gids!

Lees meer

Automatisering van uw Software en Processen: Voordelen en Toepassingen

Automatisering, Webontwikkeling, Software modernisering, Bedrijfssoftware, kennisbank

Ontdek hoe automatisering van uw software en processen uw bedrijf kan verbeteren. Leer over de voordelen van automatisering en hoe het uw bedrijfsvoering efficiënter kan maken. Neem contact met ons op voor op maat gemaakte automatiseringsoplossingen.

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