Canvas (HTML)

Den aktuella versionen av sidan har ännu inte granskats av erfarna bidragsgivare och kan skilja sig väsentligt från versionen som granskades den 29 april 2016; kontroller kräver 24 redigeringar .

Canvas ( eng.  canvas  - " canvas ", rus. kanvas ) är ett HTML5 - element designat för att skapa en tvådimensionell bitmappsbild med hjälp av skript, vanligtvis i JavaScript [1] . Ursprunget till blocket är uppe till vänster. Varje element i blocket [2] är byggt av det . Storleken på koordinatutrymmet återspeglar inte nödvändigtvis storleken på det faktiska visade området [2] . Som standard är dess bredd 300 pixlar och dess höjd är 150 [2] .

Det används som regel för att rita grafer för artiklar och spelplanen i vissa webbläsarspel. Men det kan också användas för att bädda in en video på en sida och skapa en fullfjädrad spelare.

Används i WebGL för hårdvaruacceleration av 3D-grafik [3] .

explorercanvas JavaScript-bibliotek släppt av Google Arkiverad 11 februari 2013. , som gjorde det möjligt att arbeta med Canvas i webbläsare IE7 och IE8.

Canvas kan göra det svårare för robotar att känna igen Captchas . När du använder canvas laddas inte en bild från servern, utan en uppsättning punkter (eller en ritalgoritm), enligt vilken webbläsaren ritar en bild (captcha) [4] .

Historik

Elementet canvasintroducerades först av Apple i WebKit-motorn för Mac OS X med tanke på dess efterföljande användning i Dashboard- och Safari- applikationer [1] .

Bristen på canvas i IE har åtgärdats av Google genom att släppa sin egen förlängning skriven i JavaScript som kallas ExplorerCanvas [5] .

Hittills är canvas vanligare för grafer, enkel animering och spel i webbläsare [6] . WHATWG föreslår att du använder canvas som standard för att skapa grafik i nya generationer av webbapplikationer [7] .

Mozilla Foundation har ett projekt som heter Canvas 3D [8] som syftar till att lägga till lågnivåstöd för grafikacceleratorer för att visa 3D-bilder genom HTML-canvas-elementet. Tillsammans med detta finns bibliotek som implementerar arbetet med tredimensionella modeller, bland dem tre

Support

IE Firefox safari Krom Opera iOS Android
9,0+ 3,0+ 3,0+ 3,0+ 10,0+ 3,0+ 1,0+

Funktioner

canvaslåter dig placera på duken: bild, video, text. Fyll det hela med en enfärgad färg, eller strök konturerna eller lägg till en gradient [9] . Lägga till skuggor liknande egenskaperna css3 box-shadow och text-shadow. Och slutligen, rita former genom att ange kontrollpunkter. Dessutom kan du ändra både bredden på linjerna och linjeritningspenseln, stilen på linjeanslutningar [10] .

Funktioner

Optimeringsexempel eller mönster

Om du inte behöver rita om duken, utan behöver manipulera den, så kan du "ta en bild" av hela duken och spara den till en variabel. Och arbeta redan med den här ritningen, utan att tvinga duken att ritas efter varje manipulation.

Om inte hela bilden ska uppdateras, utan bara en del av den, så kan du radera ett visst område på duken och rita det igen.

Webbläsare kan optimera animationer som körs samtidigt genom att minska antalet reflow och ommålning till en, vilket i sin tur kommer att förbättra animeringens noggrannhet. Till exempel JavaScript-animationer synkroniserade med CSS-övergångar eller SVG SMIL. Plus, om en animering utförs på en flik som är osynlig, kommer webbläsare inte att fortsätta att rita om, vilket kommer att leda till mindre CPU, GPU, minnesanvändning och, som ett resultat, minska batteriförbrukningen i mobila enheter [15] . För att göra detta, använd requestAnimationFrame.

Alla nuvarande webbläsare har ett filter för bildoskärpa när du zoomar in. Den bör användas om du ofta bearbetar bilden pixel för pixel. Genom att reducera bilden till exempel med hälften och sedan öka den i hårdvara med hjälp av ett filter [16] .

Om spelet tillåter dig att separat bearbeta bakgrunden och elementen i spelet, är det vettigt att göra två dukar ovanpå varandra [17] .

För att rensa duken är det bästa sättet att använda clearRect [17] , men om du bara rensar de nödvändiga områdena kommer hastigheten att öka ännu mer.

Kritik

Fördelar

Användning

Användning och operationer på elementet är endast möjliga genom JavaScript.

<!doctype html> < html lang = "en" > < head > < title > canvas </ title > < script src = "example.js" ></ script > </ head > < body > < canvas id = " canvas" > Detta element stöds inte </ canvas > </ body > </ html >

exempel.js-fil

var canvas = dokument . getElementById ( 'canvas' ), ​​​​context = canvas . getContext ( '2d' ); function onLoadHandler () { /* Gör något med canvas nästa */ } -fönster . onload = onLoadHandler ;

Exempel

Använda JavaScript för att rita en cirkel < html lang = "en" > < head > < title > circle </ title > </ head > < body > < canvas id = "example" > Uppdatera webbläsaren </ canvas > < script > var canvas = document . getElementById ( 'exempel' ), context = canvas . getContext ( '2d' ); function drawCircle ( x , y , r ) { sammanhang . båge ( x , y , r , 0 , 2 * Math . PI , false ); } sammanhang . startPath (); drawCircle ( 150 , 75 , 50 ); sammanhang . linjebredd = 15 ; sammanhang . strokeStyle = '#0f0' ; sammanhang . stroke (); </ script > </ body > </ html > Återgivning på duk av ett blåst Pythagoras träd < html > < head > < title > Pythagoras träd </ title > < script type = "text/javascript" > // funktion ritar en linje i vinkel från en specificerad längdpunkt ln funktion drawLine ( x , y , ln , vinkel ) { sammanhang . flytta Till ( x , y ); sammanhang . lineTo ( Math . round ( x + ln * Math . cos ( angle )), Math . round ( y - ln * Math . sin ( angle ))); } // Funktionen ritar trädfunktionen drawTree ( x , y , ln , minLn , angle ) { if ( ln > minLn ) { ln = ln * 0,75 ; drawLine ( x , y , ln , angle ); x = matematik . rund ( x + ln * Math . cos ( vinkel )); y = matematik . rund ( y - ln * Math . sin ( vinkel )); drawTree ( x , y , ln , minLn , angle + Math . PI / 4 ); drawTree ( x , y , ln , minLn , angle - Math . PI / 6 ); // om du sätter vinkeln Math.PI/4, så kommer det klassiska trädet ut } } // Initialisering av variabler funktion init () { var canvas = document . getElementById ( "träd" ), x = 100 + ( canvas . width / 2 ), y = 170 + canvas . höjd , // stamposition ln = 120 , // initial linjelängd minLn = 5 ; // minimilinjelängd canvas . bredd = 480 ; // Dukdukens bredd . höjd = 320 ; // dukhöjd kontext = duk . getContext ( '2d' ); sammanhang . fillStyle = '#ddf' ; // bakgrundsfärgskontext . strokeStyle = '#020' ; // linjefärgkontext . fillRect ( 0 , 0 , duk . bredd , duk . höjd ); sammanhang . linjebredd = 2 ; // linjebreddskontext . startPath (); drawTree ( x , y , ln , minLn , Math . PI / 2 ); sammanhang . stroke (); } fönster . onload = init ; </ script > </ head > < body > < canvas id = "tree" ></ canvas > </ body > </ html >

Bibliotek

  • libCanvas är ett lätt men kraftfullt ramverk för canvas.
  • Processing.js - En port för visualiseringsspråket Processing
  • EaselJS är ett bibliotek med ett API som liknar Flash
  • PlotKit - ett bibliotek för att skapa diagram och grafik
  • Rekapi - Canvas API för att skapa animationer på nyckelbildrutor
  • PhiloGL är ett WebGL-ramverk för datavisualisering, spelutveckling och kreativ kodning.
  • JavaScript InfoVis Toolkit - Skapar en interaktiv 2D Canvas-datavisualisering för webben.
  • Frame-Engine är ett ramverk för att utveckla applikationer och spel.

Se även

Anteckningar

  1. ↑ 1 2 Canvas Guide (MDN) . Hämtad 23 mars 2015. Arkiverad från originalet 30 mars 2015.
  2. ↑ 1 2 3 4.12.4 Canvaselementet - HTML Standard . Arkiverad från originalet den 27 april 2009.
  3. ↑ Canvas (MDN) . Hämtad 23 mars 2015. Arkiverad från originalet 25 mars 2015.
  4. ↑ Ett exempel på att bygga captcha av prickar Arkiverad 19 december 2013.
  5. ↑ explorercanvas (nedlänk) . Datum för åtkomst: 7 februari 2013. Arkiverad från originalet 11 februari 2013. 
  6. ↑ Google marknadsför HTML5 som en spelplattform (nedlänk) . Datum för åtkomst: 7 februari 2013. Arkiverad från originalet 11 februari 2013. 
  7. ↑ Specifikation från WHATWG (länk ej tillgänglig) . Datum för åtkomst: 7 februari 2013. Arkiverad från originalet 11 februari 2013. 
  8. ↑ Mozilla Canvas 3D . Tillträdesdatum: 7 februari 2013. Arkiverad från originalet 12 mars 2013.
  9. ↑ Gradienter (otillgänglig länk) . Datum för åtkomst: 7 februari 2013. Arkiverad från originalet 11 februari 2013. 
  10. ↑ Låt oss arbeta med linjer (otillgänglig länk) . Hämtad 8 februari 2013. Arkiverad från originalet 11 februari 2013. 
  11. ↑ Är det möjligt att "ladda om" duken? // Fråga professor Markap (länk finns nere) . Tillträdesdatum: 5 juli 2013. Arkiverad från originalet 7 juli 2013. 
  12. ↑ Canvaskoordinater (inte tillgänglig länk) . Tillträdesdatum: 5 juli 2013. Arkiverad från originalet 7 juli 2013. 
  13. ↑ Canvastransformationer på ett tillgängligt språk (otillgänglig länk) . Tillträdesdatum: 5 juli 2013. Arkiverad från originalet 7 juli 2013. 
  14. ↑ Fråga professor Markup: F. Finns det en 3D-duk? (inte tillgänglig länk) . Datum för åtkomst: 7 februari 2013. Arkiverad från originalet 11 februari 2013. 
  15. ↑ Avancerade animationer med requestAnimationFrame (nedlänk) . Hämtad 8 februari 2013. Arkiverad från originalet 11 februari 2013. 
  16. ↑ 1 2 Hur man släpper lös kraften i HTML5 Canvas för spel . Hämtad 3 november 2013. Arkiverad från originalet 3 november 2013.
  17. ↑ 1 2 Förbättra HTML5 Canvas Performance - HTML5 Rocks . Hämtad 3 november 2013. Arkiverad från originalet 4 november 2013.
  18. ↑ 1 2 3 4 5 6 Vilka är fördelarna/nackdelarna med Canvas vs. DOM i JavaScript-spelutveckling? . Hämtad 3 november 2013. Arkiverad från originalet 4 november 2013.
  19. ↑ Maskinvaruaccelererad duk i Google Chrome . Hämtad 3 november 2013. Arkiverad från originalet 3 november 2013.

Länkar

Arbetsexempel Efter information
 Grafik på webben
Vektor
Raster