Lerret element - Canvas element

Denne artikkelen handler om HTML -elementet. For det generelle elementet i brukergrensesnitt, se Canvas (GUI) .
HTML
Sammenligninger

Den kanvaselement er en del av HTML5 og gjør det mulig for dynamisk, prosedyre gjengivelse av 2D-former og punktbilder. Det er en prosedyremodell på lavt nivå som oppdaterer et bitmap . HTML5 Canvas hjelper også med å lage 2D -spill.

Historie

Canvas ble opprinnelig introdusert av Apple for bruk i sin egen Mac OS X WebKit -komponent i 2004, og drev applikasjoner som Dashboard -widgets og Safari -nettleseren. Senere, i 2005, ble den vedtatt i versjon 1.8 av Gecko -nettlesere og Opera i 2006, og standardisert av Web Hypertext Application Technology Working Group (WHATWG) på nye foreslåtte spesifikasjoner for neste generasjons webteknologier.

Bruk

A canvasbestår av et tegnbart område definert i HTML -kode med høyde- og breddeattributter . JavaScript -kode kan få tilgang til området gjennom et komplett sett med tegningsfunksjoner som ligner på andre vanlige 2D APIer, og dermed muliggjøre dynamisk generert grafikk. Noen forventede bruksområder av lerret inkluderer å bygge grafer, animasjoner, spill og bildesammensetning.

Eksempel

Følgende kode oppretter et Canvas -element på en HTML -side: 

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Ved å bruke JavaScript kan du tegne på lerretet: 

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Denne koden tegner et rødt rektangel på skjermen.

Canvas API gir også save()og restore()for lagring og gjenoppretting av alle lerretskontekstens attributter.

Lerretelementstørrelse kontra tegningsflatestørrelse

Et lerret har faktisk to størrelser: størrelsen på selve elementet og størrelsen på elementets tegningsflate. Angi elementets bredde og høyde attributter setter begge disse størrelsene; CSS -attributter påvirker bare elementets størrelse og ikke tegningsoverflaten.

Som standard er både lerretelementets størrelse og størrelsen på tegningsflaten 300 skjermpiksler bred og 150 skjermpiksler høy. I oppføringen vist i eksemplet, som bruker CSS til å angi størrelsen på lerretelementet, er størrelsen på elementet 600 piksler bred og 300 piksler høy, men størrelsen på tegneoverflaten forblir uendret ved standardverdien 300 piksler × 150 piksler. Når størrelsen på et lerretelement ikke samsvarer med størrelsen på tegneoverflaten, skalerer nettleseren tegneoverflaten for å passe til elementet (noe som kan resultere i overraskende og uønskede effekter).

Eksempel på å sette elementstørrelse og tegne overflatestørrelse til forskjellige verdier: 

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</html>

Lerret kontra skalerbar vektorgrafikk (SVG)

SVG er en tidligere standard for å tegne figurer i nettlesere. I motsetning til lerret, som er rasterbasert , er SVG imidlertid vektorbasert , slik at hver tegnet form huskes som et objekt i en scenediagram eller Document Object Model , som deretter gjengis til et bitmap. Dette betyr at hvis attributtene til et SVG-objekt blir endret, kan nettleseren automatisk gjengi scenen på nytt.

Lerretsobjekter, derimot, tegnes i umiddelbar modus . I lerretseksemplet ovenfor, når rektangelet er tegnet, blir modellen det ble trukket fra, glemt av systemet. Hvis posisjonen skulle endres, måtte hele scenen tegnes på nytt, inkludert gjenstander som kan ha blitt dekket av rektangelet. Men i det tilsvarende SVG -tilfellet kan man ganske enkelt endre posisjonsattributtene til rektanglet, og nettleseren vil avgjøre hvordan det skal male det på nytt. Det er flere JavaScript-biblioteker som legger til scenegraffunksjoner i lerretselementet. Det er også mulig å male et lerret i lag og deretter gjenskape spesifikke lag.

SVG -bilder er representert i XML , og komplekse scener kan opprettes og vedlikeholdes med XML -redigeringsverktøy.

SVG -scenediagrammet gjør at hendelsesbehandlere kan knyttes til objekter, så et rektangel kan svare på en onClickhendelse. For å få samme funksjonalitet med lerret, må man manuelt matche koordinatene til museklikket med koordinatene til det tegnet rektangelet for å avgjøre om det ble klikket.

Konseptuelt er lerret et API på lavere nivå som en motor, som støtter for eksempel SVG, kan bygges på. Det er JavaScript -biblioteker som tilbyr delvise SVG -implementeringer ved bruk av lerret for nettlesere som ikke gir SVG, men som støtter lerret, for eksempel nettleserne i Android 2.x. Imidlertid er dette normalt ikke tilfellet - de er uavhengige standarder. Situasjonen er komplisert fordi det er scenediagrambiblioteker for lerret, og SVG har noen funksjoner for manipulering av bitmaps.

Reaksjoner

På tidspunktet for introduksjonen ble lerretelementet møtt med blandede reaksjoner fra nettstandardsamfunnet. Det har vært argumenter mot Apples beslutning om å lage et nytt proprietært element i stedet for å støtte SVG -standarden. Det er andre bekymringer om syntaks, for eksempel fravær av et navneområde .

Intellektuell eiendom over lerret

14. mars 2007 videresendte WebKit -utvikleren Dave Hyatt en e -post fra Apples Senior Patent Counsel, Helene Plotka Workman, som uttalte at Apple forbeholdt seg alle immaterielle rettigheter knyttet til WHATWGs Web Applications 1.0 Working Draft, datert 24. mars 2005, avsnitt 10.1, med tittelen "Graphics: The bitmap canvas", men lot døren stå åpen for lisensiering av patentene hvis spesifikasjonen skulle overføres til et standardorgan med en formell patentpolicy . Dette forårsaket betydelig diskusjon blant webutviklere og reiste spørsmål om WHATWGs mangel på retningslinjer for patenter i forhold til World Wide Web Consortium (W3C) 's eksplisitte favorisering av royaltyfrie lisenser. Apple avslørte senere patentene under W3Cs royaltyfrie patentlisensieringsvilkår. Avsløringen betyr at Apple er pålagt å gi royalty-fri lisensiering for patentet når Canvas-elementet blir en del av en fremtidig W3C-anbefaling opprettet av HTML-arbeidsgruppen.

Personvernhensyn

Lerretfingeravtrykk er en av en rekke nettleserens fingeravtrykksteknikker for sporing av nettbrukere som lar nettsteder identifisere og spore besøkende ved hjelp av HTML5 -lerretelement. Teknikken fikk bred mediedekning i 2014 etter at forskere fra Princeton University og KU Leuven University beskrev det i sitt papir The Web never forgets . Personvern bekymringer angående lerret fingeravtrykk handler om det faktum at selv å slette informasjonskapsler og tømme bufferen ikke vil være tilstrekkelig for brukerne å unngå online sporing.

Nettleserstøtte

Elementet støttes av de nåværende versjonene av Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera og Microsoft Edge .

Se også

Referanser

Eksterne linker