- Se mahdollistaa DOM-elementtien renderöinnin suoraan Canvas 2D-, WebGL- ja WebGPU-konteksteissa.
- Se ylläpitää natiivia vuorovaikutteisuutta, näytönlukijoiden helppokäyttöisyyttä ja hakukoneiden indeksointia.
- Se poistaa tarpeen käyttää ulkoisia kuvakaappauskirjastoja web-käyttöliittymien integroimiseksi monimutkaisiin graafisiin ympäristöihin.
Hyvin pitkään meidän web-kehitykseen omistautuneiden on ollut pakko valita kahden melko jäykän polun välillä rakentaessamme tehokkaita visuaalisia sovelluksia. Joko luotimme DOM:iin hyödyntääksemme sen semanttista rakennetta ja saavutettavuutta, tai sukelsimme pää edellä canvas-elementtiin saavuttaaksemme raakaa suorituskykyä matalan tason grafiikassa. Pohjimmiltaan kyse oli valinnasta rakenteellisen kätevyyden ja visuaalisen tehokkuuden välillä , ilman mitään kompromisseja.
Mutta tässä kohtaa kokeellinen HTML-in-Canvas-rajapinta astuu kuvaan, joka on jo saatavilla lähdekooditestauksen kautta. Tämä työkalu on todellinen helmi, koska sen avulla voimme maalata DOM-sisältöä suoraan 2D-kankaalle tai jopa WebGL- ja WebGPU-tekstuureille, mutta yhdellä ratkaisevalla yksityiskohdalla: käyttöliittymä pysyy vuorovaikutteisena ja helppokäyttöisenä . Ei ole enää tarvetta valita puolta, koska nyt voimme yhdistää molempien maailmojen parhaat puolet luodaksemme kokemuksia, joita oli vielä äskettäin yksinkertaisesti mahdotonta ohjelmoida.
Ikuinen dilemma: DOM vastaan Canvas
Ymmärtääksemme, miksi tämä on paradigman muutos, meidän on tarkasteltava, mitä kukin elementti tuo pöytään. DOM on verkon perusta; se tarjoaa valmiita tekstin asetteluratkaisuja ja antaa käyttäjien suorittaa luonnollisia toimintoja, kuten valita kopioitavaa tekstiä tai tallentaa kuva hiiren kakkospainikkeella. Lisäksi se toimii saumattomasti esteettömyystyökalujen, lukutilan, selainlaajennusten ja zoomauksen kanssa.
Toisaalta Canvas (ja sen vanhemmat sisarukset WebGL ja WebGPU) antavat meille täyden hallinnan jokaisesta pikselistä, mikä on elintärkeää peleille tai erittäin vaativille sovelluksille, kuten Figma tai Google Docs. Ongelmana on, että koska se on pohjimmiltaan pikseliruudukko, kaikki sen sisään laitettava jää loukkuun staattiseen kuvaan . Jos halusi responsiivista tekstiä, kaikki logiikka piti ohjelmoida tyhjästä, mikä kasvatti koodin kokoa ja rikkoi täysin kaikki selaimen natiivit toiminnot.
Mitä hyödymme sijoittamalla DOM:n Canvasille?
HTML-in-Canvas-rajapinta toimii tuona tarvittavana siltana. Sijoittamalla HTML:n kankaalle ja synkronoimalla sen muunnoksen saavutamme täysin interaktiivisen sisällön. Merkittävimpiä etuja ovat yksinkertaistettu tekstin asettelu , mukaan lukien tuki kaksisuuntaisille kielille tai useille riveille CSS:n kautta ilman komplikaatioita.
Lisäksi lomakkeen ohjausobjektit toimivat loistavasti ja niitä on paljon helpompi mukauttaa. Mutta tehokkain ominaisuus on se, että kankaalle renderöity sisältö näkyy esteettömyyspuussa, jolloin näytönlukijat voivat tulkita käyttöliittymää . Jopa selaimen oma hakutoiminto (Ctrl+F) voi paikantaa ja korostaa WebGL-tekstuuriin piirrettyä tekstiä – mikä kuulostaa taianomaiselta, mutta on nyt totta.
Emme myöskään saa unohtaa, että verkkoindeksoijat ja tekoälyagentit voivat indeksoida sisältöä ja että selainlaajennukset toimivat natiivisti. Esimerkiksi jos sinulla on laajennus, joka kääntää sanoja, se päivittää automaattisesti 3D-verkoissasi renderöidyn tekstin . Jopa Chromen DevTools-työkaluilla voimme tarkastella ja muuttaa CSS-tyylejä reaaliajassa ja nähdä, miten ne vaikuttavat 3D-tekstuuriin.
Käyttötapaukset ja tosielämän sovellukset
Tämä teknologia avaa uskomattomia ovia. Hyvin suurissa canvas-pohjaisissa sovelluksissa se mahdollistaa monimutkaisten käyttöliittymäkomponenttien renderöinnin natiivisti, mikä pienentää pakettien kokoa ja parantaa saavutettavuutta. Videopelien ja WebXR:n maailmassa se on puhdasta kultaa: voit luoda 3D-kirjan, jonka sivut ovat aitoa HTML:ää, tai komentopäätteen pelin sisällä, joka mahdollistaa natiivin tekstin kopioinnin ja liittämisen.
Tekninen toteutus: Vaiheittainen
Tällä hetkellä API on alkuvaiheessa (Chrome 148-150). Testataksesi sitä sinun on käytettävä Chrome Canarya ja otettava käyttöön lippu. chrome://flags/#canvas-draw-elementKäyttöprosessi on jaettu kolmeen päävaiheeseen.
1. Kankaan asetukset
Ensimmäinen asia on lisätä ominaisuus layoutsubtree (o content="drawable" Uudemmissa versioissa, kuten Chrome 157+, canvas-tagiin. Tämä kertoo selaimelle, että asetteluun on sisällytettävä sisäkkäisiä elementtejä. Jotta sisältö ei näyttäisi epäselvältä, on tärkeää säädä kankaan ruudukkoa laitteen skaalauskertoimeen ResizeObserver-palvelimen avulla.
2. Renderöintiprosessi
2D-kontekstissa käytämme menetelmää drawElementImage tapahtuman sisällä onpaintTämä tapahtuma käynnistyy aina, kun elementti on piirrettävä uudelleen, esimerkiksi kun käyttäjä korostaa tekstiä. WebGL:ssä vastaava funktio on texElementImage2D, ja WebGPU:lle sitä käytetään copyElementImageToTextureKaikissa kolmessa tapauksessa tavoitteena on kääntää DOM:n tekstuuriksi tai graafinen pinta.
3. CSS-muunnosten synkronointi
Tässä kohtaa monet epäonnistuvat. Kun elementti on renderöity, sinun on kerrottava selaimelle, missä se fyysisesti näytöllä sijaitsee, jotta klikkaukset ja hiiren osoittimen vieminen toimisivat. 2D-muodossa käytämme piirtometodin palauttamaa muunnosta ominaisuuteen. style.transform elementistä. 3D:ssä se on monimutkaisempi, koska se vaatii muunna WebGL MVP -matriisi DOM-taulukkoon, normalisoi elementti ja yhdistä se kanvaasin näkymään.
Kirjaston tuki ja rajoitukset
Onneksi meidän ei tarvitse tehdä kaikkea manuaalisesti. Three.js on jo toteuttanut kokeellisen tuen kautta THREE.HTMLTexturePlayCanvas hoitaa raskaan synkronoinnin ja sallii myös HTML-fonttien määrittämisen tekstuureillesi oman API:nsa kautta. On kuitenkin tärkeää huomata, että turvallisuussyistä API... Se ei toimi iframe-sisällön kanssa muista verkkotunnuksista (ristiin perustuva).
Toinen tärkeä rajoitus on, että vieritys ja animaatiot kanvaasilla ovat riippuvaisia JavaScriptistä. Tämä tarkoittaa, että niitä ei voida päivittää pääsäikeestä riippumatta, joten suorituskykyä on seurattava, kun vieritettävää sisältöä lisätään kanvaasiin.
Yksityisyys ja turvallisuus
Järjestelmä on suunniteltu estämään arkaluonteisten tietojen vuotaminen. Maalausprosessista on jätetty pois tiedot ulkoisilta verkkotunnuksilta, järjestelmän värit, oikolukuohjelmat ja vierailtujen linkkien tiedot. Sisäisten hakutulosten korostaminen ja vierityspalkkien ulkoasu ovat sallittuja, koska ne eivät vaaranna käyttäjän yksityisyyttä .
Tämä innovatiivinen arkkitehtuuri mahdollistaa HTML-sisällön käsittelyn dynaamisena mutta älykkäänä kuvana. Yhdistämällä selaimen renderöintityönkulun GPU:n tehoon se ratkaisee esteettömyysongelmia graafisissa ympäristöissä ja yksinkertaistaa merkittävästi monimutkaisten 3D-käyttöliittymien luomista, mikä tekee verkosta osallistavamman ja visuaalisesti vaikuttavamman tinkimättä natiivista toiminnallisuudesta.