Benutzer:JürgenB
Informationen zum Autor
- Name:
- Jürgen Berkemeier
- E-Mail:
- juergen@berkemeier.eu
- Homepage:
- https://www.j-berkemeier.de
Inhaltsverzeichnis
- 1 Tannenbaum mit Worker und OffscreenCanvas
- 2 Tannenbaum
- 3 Zugängliche Navigation mit popover und anchor
- 4 Inline-Tooltips mit Popover und Anchor-Technik
- 5 Test verschachtelte Popover mit Anchor positioniert
- 6 Test der anchor-Technik
- 7 Test der popover-Technik
- 8 Custom-Element mit Min-Max-Schieberegler
- 9 Custom-Element mit synchronisierten Range- und Number-Inputs
- 10 Vergleich der Farbmodelle RGB, HSL und OKLAB
- 11 Komfort-Bildwechsler
- 12 Bubbling, Capturing und stopPropagation
- 13 Tutorial Drag 'n Drop
- 14 Tutorial Tabellen dynamisch sortieren
- 15 Tutorial Mouse and More
- 16 Testseite für Maus-, Touch- und Pointerevents
- 17 Testseite Multipointerevents
- 18 Blog-Artikel Einstieg in Leaflet
- 19 Blog-Artikel Einbinden einer OSM-Karte als Beispiel für Custom Elements
Tannenbaum mit Worker und OffscreenCanvas
Beispiel für das Erstellen einer Canvas-Grafik vom Worker aus
Normalerweise kann man aus dem Worker heraus nicht direkt auf das DOM zugreifen. Die Rechnung läuft im Worker, aber die Ausgabe muss dann doch noch im normalen Script-Bereich erfolgen. Mit OffscreenCanvas hat man aber die Möglichkeit, vom Worker aus direkt eine Canvas-Grafik zu erstellen:
const worker = new Worker(...);
const canvas = document.querySelector("#Tanne");
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);
und im Worker
self.addEventListener('message',function(messageEvent) {
canvas = messageEvent.data.canvas;
canvasHeight = canvas.height;
canvasWidth = canvas.width;
context = canvas.getContext("2d");
...
}
Tannenbaum
Inline-Tooltips mit Popover und Anchor-Technik
Infobox/Tooltips_mit_Popover#Anchor_Positioning
Test verschachtelte Popover mit Anchor positioniert
Test der anchor-Technik
Test der popover-Technik
Custom-Element mit Min-Max-Schieberegler
Formulare/Eingabe_von_Zahlen#.3Cdouble-range-input.3E_mit_Min-Max-Schieberegler
Custom-Element mit synchronisierten Range- und Number-Inputs
Formulare/Eingabe_von_Zahlen#.3Cself-slider.3E_mit_synchronisierten_Range-_und_Number-Inputs
Vergleich der Farbmodelle RGB, HSL und OKLAB
Vergleich der Farbmodelle
Komfort-Bildwechsler
Bubbling, Capturing und stopPropagation
JavaScript/Tutorials/DOM/Ereignisverarbeitung#Bubbling.2C_Capturing_und_stopPropagation
Tutorial Drag 'n Drop
JavaScript/Tutorials/Drag_and_Drop
Tutorial Tabellen dynamisch sortieren
JavaScript/Tutorials/Tabellen_dynamisch_sortieren
Tutorial Mouse and More
JavaScript/Tutorials/Mouse and More
Testseite für Maus-, Touch- und Pointerevents
Testseite für Maus-, Touch- und Pointerevents
Testseite für Maus-, Touch- und Pointerevents
Testseite Multipointerevents
Testseite Multipointerevents
Blog-Artikel Einstieg in Leaflet
https://blog.selfhtml.org/2019/jan/13/einstieg-in-leaflet
Blog-Artikel Einbinden einer OSM-Karte als Beispiel für Custom Elements
https://blog.selfhtml.org/2020/dec/03/einbinden-einer-osm-karte-als-beispiel-fuer-custom-elements
