Å lage lerretsprogrammer er den nye tingen, vi kan til og med lage spill med den, den støttes i alle de store nettleserne både på skrivebordet og mobil, og det gjør det til en mer levedyktig løsning enn å bruke Flash.
I denne opplæringen skal vi bruke lerretelementet til å lage en enkel fargeplukker som ikke krever noen Flash, alt du trenger er en tekstredigerer og en nettleser.
Før vi starter, ta en titt på hva vi skal bygge her. Du kan også laste ned kildefilene her. Merk at hvis du skal teste demoen lokalt, må du bruke en annen nettleser enn Chrome; Kroms sikkerhetsmodell betyr at skriptet bare vil fungere på nettet.
For dette eksempelet vil HTML-filen være veldig minimal, alt vi trenger for at fargeplukkeren skal fungere er et lerretelement og et sted å vise vår valgte farge i RGB og HEX-formater, så alt vi trenger er dette:
HEX: RGB: Siden vi vil bruke et bakgrunnsbilde med fargepalletet, har jeg laget lerretets bredde og høyde, og verdiene for selecetd-farge vil vises i inngangene for enklere valg.
Du bør også legge til jQuery på siden din siden vi skal bruke noe jQuery-kode.
Det første vi må gjøre for å få fargeplukkeren til å arbeide er å få lerretet og dets kontekst, og for å gjøre alt vi trenger er en linje med kode, slik som:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nå som vi har fått lerretselementet og dens kontekst, kan vi starte med å sette bildet som bakgrunnen til lerretet. For å gjøre dette må vi opprette et bildeobjekt og gjøre kilden til nettadressen til bildet. Når dette bildet er lastet, må vi tegne det i lerretet:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Så langt så bra, ikke sant?
Vel, dette er den delen der vi må definere hva som skjer når du klikker et sted i lerretet, og hvis du tenker på det, må du først få brukerens markørposisjon i lerretet for å se hvor de klikket, slik som:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Med disse to kodelinjene kan vi se hvor brukeren klikket, og hva vi gjør er å få cordinates av hvor brukeren klikket og deretter trekke fra det som forskyvningen av lerretet. Det vil fortelle oss hvor brukeren klikket i forhold til stillingen på lerretet.
Vår neste skritt er å få RGB-verdiene til stedet brukeren klikket på og for å gjøre det vi trenger, skal vi bruke funksjonen getImageData og feste x- og y-posisjonen til klikket:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Vi har nå disse verdiene lagret i R-, G- og B-variabler, men vi vil vise denne informasjonen til brukeren på en måte som de lett kan lese, så vi må opprette en RGB-variabel som inneholder disse tre verdiene separert med kommaer og deretter presentere dette som verdien av ett av våre felt:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Og hvis du tester det nå har du allerede en fullt funksjonell fargeplukker som henter RGB-verdien av hvor som helst du klikker, men for å gjøre dette litt bedre kan vi legge til en funksjon fra Javascripter som konverterer RGB-verdier til HEX-verdier; funksjonen er:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) {n = parseInt(n,10);if (isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);}Nå som vi fikk denne funksjonen, er alt vi trenger for å presentere HEX-verdiene, utføre funksjonen med våre RBG-verdier, og sett deretter verdien av inngangen til HEX-farge med en # før og med funksjonen allerede på plass dette er ganske enkelt:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Jeg håper at med denne opplæringen har du innsett potensialet det er å lage apps med lerret. Det er mange mer avanserte apps der ute, folk lager til og med spill med lerret, så det er en ting å utforske fordi du kan bygge noen fantastiske ting med det.
Hvilke andre bruksområder har du funnet for Lerret? Hva vil du kunne bruke den til? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, fargeplukkers bilde via Shutterstock.