Lærred (HTML)

Canvas ( eng.  canvas  - " canvas ", rus. kanvas ) er et HTML5 - element designet til at skabe et todimensionelt bitmapbillede ved hjælp af scripts, normalt i JavaScript [1] . Blokkens oprindelse er øverst til venstre. Hvert element i blokken [2] er bygget af det . Størrelsen af ​​koordinatrummet afspejler ikke nødvendigvis størrelsen af ​​det faktisk viste område [2] . Som standard er dens bredde 300 pixels, og dens højde er 150 [2] .

Det bruges som regel til at tegne grafer for artikler og spillefeltet i nogle browserspil. Men det kan også bruges til at indlejre en video på en side og skabe en fuldgyldig afspiller.

Anvendes i WebGL til hardwareacceleration af 3D-grafik [3] .

explorercanvas JavaScript-bibliotek udgivet af Google Arkiveret 11. februar 2013. , som gjorde det muligt at arbejde med Canvas i IE7 og IE8 browsere.

Canvas kan gøre det sværere for robotter at genkende Captchas . Ved brug af lærred indlæses ikke et billede fra serveren, men et sæt punkter (eller en tegnealgoritme), hvorefter browseren tegner et billede (captcha) [4] .

Historie

Elementet canvasblev først introduceret af Apple i WebKit -motoren til Mac OS X med henblik på dets efterfølgende brug i Dashboard- og Safari -applikationer [1] .

Manglen på lærred i IE er blevet rettet af Google ved at frigive sin egen udvidelse skrevet i JavaScript kaldet ExplorerCanvas [5] .

Til dato er lærred mere almindeligt brugt til graftegning, simpel animation og spil i browsere [6] . WHATWG foreslår at bruge lærred som standard til at skabe grafik i nye generationer af webapplikationer [7] .

Mozilla Foundation har et projekt kaldet Canvas 3D [8] , der har til formål at tilføje lavniveau-understøttelse af grafikacceleratorer til at vise 3D-billeder gennem HTML-lærredselementet. Hertil kommer biblioteker, der implementerer arbejdet med tredimensionelle modeller , heriblandt tre

Support

Funktioner

canvasgiver dig mulighed for at placere på lærredet: billede, video, tekst. Fyld det hele med en ensfarvet farve, eller streg konturerne, eller tilføj endda en gradient [9] . Tilføjelse af skygger svarende til egenskaberne css3 box-shadow og text-shadow. Og endelig, tegning af figurer ved at angive kontrolpunkter. Desuden kan du ændre både bredden af ​​linjerne og linjetegningspenslen, stilen af ​​linjeforbindelser [10] .

Funktioner

• Ændring af højden eller bredden af ​​lærredet vil slette alt dets indhold og alle indstillinger, med andre ord, det vil blive oprettet på ny [11] ;
• Referencepunktet (punkt 0,0) er i øverste venstre hjørne [12] . Men det kan flyttes [13] ;
• Der er ingen 3D-kontekst, der er separate udviklinger, men de er ikke standardiserede [14] ;
• Tekstfarve kan dog angives på samme måde som CSS, såvel som skriftstørrelse.

Optimeringseksempler eller mønstre

Hvis du ikke skal gentegne lærredet, men skal manipulere det, så kan du "tage et billede" af hele lærredet og gemme det til en variabel. Og arbejd allerede med denne tegning uden at tvinge lærredet til at blive tegnet efter hver manipulation.

Hvis ikke hele billedet skal opdateres, men kun en del af det, så kan du slette et bestemt område på lærredet og tegne det igen.

Browsere kan optimere animationer, der kører på samme tid, ved at reducere antallet af reflow og genmaling til én, hvilket igen vil forbedre nøjagtigheden af ​​animationen. For eksempel JavaScript-animationer synkroniseret med CSS-overgange eller SVG SMIL. Plus, hvis en animation udføres i en fane, der er usynlig, vil browsere ikke fortsætte med at tegne igen, hvilket vil føre til mindre CPU, GPU, hukommelsesforbrug og som et resultat reducere batteriforbruget i mobile enheder [15] . For at gøre dette skal du bruge requestAnimationFrame.

Alle nuværende browsere har et billedsløringsfilter, når der zoomes ind. Det skal bruges, hvis du ofte behandler billedet pixel for pixel. Ved at reducere billedet for eksempel til det halve og derefter øge det i hardware ved hjælp af et filter [16] .

Hvis spillet giver dig mulighed for separat at behandle baggrunden og elementerne i spillet, så giver det mening at lave to lærreder oven på hinanden [17] .

For at rydde lærredet er den bedste måde at bruge clearRect [17] , men hvis du kun rydder de nødvendige områder, så vil hastigheden stige endnu mere.

Kritik

• Belaster processoren og RAM for meget;
• På grund af en begrænsning af skraldeopsamleren er der ingen måde at rydde op i hukommelsen;
• Det er nødvendigt selv at bearbejde begivenheder med objekter [18] ;
• Dårlig ydeevne ved høj opløsning [18] ;
• Du skal tegne hvert element separat [18] .
• Muligheden for at skabe specielle "beacons" på siderne, de såkaldte. Lærredsfingeraftryk , til sporing af brugere på nettet.

Fordele

• I modsætning til SVG er det meget mere bekvemt at håndtere et stort antal elementer;
• Har hardwareacceleration [16] [19] ;
• Du kan manipulere hver pixel [18] ;
• Du kan anvende billedbehandlingsfiltre [18] ;
• Der er mange biblioteker [18] .

Brug

Brug og operationer på elementet er kun mulig gennem JavaScript.