- Umožňuje vykreslování prvků DOM přímo v kontextech Canvas 2D, WebGL a WebGPU.
- Zachovává nativní interaktivitu, přístupnost pro čtečky obrazovky a indexování vyhledávači.
- Eliminuje potřebu používat externí knihovny pro snímky obrazovky k integraci webových rozhraní do složitých grafických prostředí.
Po velmi dlouhou dobu jsme my, kteří se věnujeme webovému vývoji, nuceni volit mezi dvěma poměrně rigidními cestami při vytváření výkonných vizuálních aplikací. Buď jsme se spoléhali na DOM, abychom využili jeho sémantickou strukturu a přístupnost, nebo jsme se po hlavě vrhli do prvku canvas, abychom získali surový výkon v nízkoúrovňové grafice. V podstatě to byla volba mezi strukturálním pohodlím a vizuální silou , bez možnosti kompromisu.
Ale právě zde přichází na řadu experimentální HTML-in-Canvas API, které je již k dispozici prostřednictvím testování zdrojového kódu. Tento nástroj je skutečným klenotem, protože nám umožňuje malovat obsah DOM přímo na 2D plátno nebo dokonce textury WebGL a WebGPU, ale s jedním klíčovým detailem: rozhraní zůstává interaktivní a přístupné . Už není třeba si vybírat strany, protože nyní můžeme sloučit to nejlepší z obou světů a vytvořit tak zážitky, které až donedávna nebylo možné naprogramovat.
Věčné dilema: DOM versus Canvas
Abychom pochopili, proč se jedná o paradigmatický posun, musíme se podívat na to, co každý prvek přináší. DOM je základem webu; poskytuje hotová řešení pro rozvržení textu a umožňuje uživatelům provádět přirozené akce, jako je výběr textu ke kopírování nebo kliknutí pravým tlačítkem myši na obrázek pro jeho uložení. Navíc bezproblémově funguje s nástroji pro usnadnění přístupu, režimem čtení, rozšířeními prohlížeče a funkcí zoom.
Na druhou stranu, Canvas (a jeho starší sourozenci WebGL a WebGPU) nám dává úplnou kontrolu nad každým pixelem, což je zásadní pro hry nebo velmi náročné aplikace, jako je Figma nebo Google Docs. Problém je v tom, že jelikož se v podstatě jedná o mřížku pixelů, vše, co do ní vložíme, je uvězněno ve statickém obrázku . Pokud jste chtěli responzivní text, museli jste naprogramovat veškerou logiku od nuly, což nafouklo velikost kódu a zcela narušilo veškeré nativní funkce prohlížeče.
Co získáme vložením DOMu do Canvasu?
Rozhraní HTML-in-Canvas API funguje jako tento nezbytný most. Umístěním HTML do plátna a synchronizací jeho transformace dosahujeme plně interaktivního obsahu. Mezi nejvýznamnější výhody patří zjednodušené rozvržení textu , včetně podpory obousměrných jazyků nebo více řádků pomocí CSS, a to bez komplikací.
Ovládací prvky formuláře navíc fungují skvěle a mnohem snadněji se přizpůsobují. Nejsilnější funkcí je však to, že obsah vykreslený na plátně je zobrazen ve stromu přístupnosti, což umožňuje čtečkám obrazovky interpretovat rozhraní . Dokonce i nativní vyhledávací funkce prohlížeče (Ctrl+F) dokáže vyhledat a zvýraznit text nakreslený v textuře WebGL – což zní jako kouzlo, ale nyní je to realita.
Nesmíme také zapomenout, že webové roboty a agenti umělé inteligence dokáží indexovat obsah a že rozšíření prohlížeče fungují nativně. Pokud například máte rozšíření, které překládá slova, automaticky aktualizuje text vykreslený ve vašich 3D sítích. Dokonce i z nástrojů DevTools v Chromu můžeme v reálném čase kontrolovat a měnit styly CSS a sledovat, jak ovlivňují 3D texturu.
Případy užití a aplikace v reálném životě
Tato technologie otevírá neuvěřitelné dveře. U velmi rozsáhlých aplikací založených na plátně umožňuje nativní vykreslování složitých komponent rozhraní, čímž se snižuje velikost balíčku a zlepšuje přístupnost. Ve světě videoher a WebXR je to ryzí zlato: mohli byste vytvořit 3D knihu, jejíž stránky jsou skutečným HTML, nebo příkazový terminál ve hře, který umožňuje kopírování a vkládání nativního textu.
Technická implementace: Krok za krokem
API je v současné době v rané fázi (Chrome 148-150). Pro jeho otestování je potřeba použít Chrome Canary a povolit příznak chrome://flags/#canvas-draw-elementProces užívání je rozdělen do tří hlavních fází.
1. Nastavení plátna
První věcí je přidat atribut layoutsubtree (o content="drawable" V novějších verzích, jako je Chrome 157+), k tagu canvas. To prohlížeči říká, že do rozvržení je třeba zahrnout vnořené prvky. Aby se zabránilo rozmazání obsahu, je nezbytné upravit mřížku plátna na faktor měřítka zařízení pomocí ResizeObserver.
2. Proces vykreslování
V 2D kontextu používáme metodu drawElementImage v rámci akce onpaintTato událost se spustí vždy, když je třeba element překreslit, například když uživatel zvýrazní text. Pro WebGL je ekvivalentní funkce texElementImage2Da pro WebGPU se používá copyElementImageToTextureVe všech třech případech je cílem převést DOM na texturu nebo grafický povrch.
3. Synchronizace transformace CSS
Zde mnoho selhává. Jakmile je prvek vykreslen, musíte prohlížeči sdělit, kde se fyzicky na obrazovce nachází, aby kliknutí a najetí myší fungovaly. Ve 2D aplikujeme na vlastnost transformaci vrácenou metodou kreslení. style.transform prvku. Ve 3D je to složitější, protože vyžaduje převést matici WebGL MVP do pole DOM, normalizujte element a namapujte ho na zobrazovací oblast plátna.
Podpora a omezení knihovny
Naštěstí nemusíme dělat všechno ručně. Three.js již implementoval experimentální podporu prostřednictvím THREE.HTMLTexturePlayCanvas, který zvládá náročnou synchronizaci, také umožňuje přiřadit HTML fonty k texturám prostřednictvím vlastního API. Je však důležité poznamenat, že z bezpečnostních důvodů API... Nefunguje s obsahem iframe. z jiných domén (cross-origin).
Dalším důležitým omezením je, že rolování a animace v rámci plátna závisí na JavaScriptu. To znamená, že je nelze aktualizovat nezávisle na hlavním vlákně, takže při přidávání rolovatelného obsahu na plátno je nutné sledovat výkon .
Soukromí a bezpečnost
Systém je navržen tak, aby se zabránilo úniku citlivých informací. Proces vykreslování vylučuje data z externích domén, systémové barvy, kontrolu pravopisu a informace z navštívených odkazů. Zvýraznění interních výsledků vyhledávání a zobrazení posuvníků jsou povoleny, protože neohrožují soukromí uživatelů .
Tato inovativní architektura umožňuje zacházet s HTML obsahem jako s dynamickým, ale zároveň inteligentním obrázkem. Integrací vykreslovacího procesu prohlížeče s výkonem GPU řeší problémy s přístupností v grafických prostředích a dramaticky zjednodušuje vytváření složitých 3D rozhraní, čímž se web stává inkluzivnějším a vizuálně působivějším, aniž by byla obětována nativní funkcionalita.