Orchestrierung imperativer Canvas-Renderings via $effect

Snippet

Orchestrierung imperativer Canvas-Renderings via $effect

Beim Umgang mit imperativen APIs wie HTML5 Canvas dient $effect als Brücke. Jede Änderung an 'color' oder 'position' (sofern es sich um reaktive Runen handelt) löst den Effekt aus und ermöglicht eine hochperformante visuelle Synchronisation zwischen Status und Pixeln.

snippet.js
javascript
$effect(() => {
  const ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, 500, 500);
  ctx.fillStyle = color;
  ctx.fillRect(position.x, position.y, 50, 50);
});

svelte

Erklärung

canvasElement.getContext('2d');

Ruft den Zeichenkontext für die imperative API ab.

ctx.clearRect(0, 0, 500, 500);

Setzt den Frame vor dem nächsten reaktiven Zeichenzyklus zurück.

ctx.fillRect(position.x, position.y, 50, 50);

Zeichnet das Element unter Verwendung der aktuellen Werte des reaktiven States.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek