Oprettelse af lærred apps er den nye ting, vi kan endda lave spil med den, den understøttes i alle større browsere både desktop og mobil, og det gør det til en mere levedygtig løsning end at bruge Flash.
I denne vejledning skal vi bruge lærredelementet til at skabe en simpel farvevælger, der ikke kræver nogen Flash, alt du behøver er en tekstredigerer og en browser.
Før vi starter, kig på, hvad vi vil bygge her. Du kan også downloade kildefilerne her. Bemærk, at hvis du vil teste demoen lokalt, skal du bruge en anden browser end Chrome; Kroms sikkerhedsmodel betyder, at scriptet kun fungerer online.
For dette eksempel vil HTML'en være meget minimal, alt, hvad vi har brug for for at farvevælgeren skal arbejde, er et lærredselement og et sted at vise vores valgte farve i RGB- og HEX-formater, så alt hvad vi behøver er dette:
HEX: RGB: Da vi vil bruge et baggrundsbillede med farvepalletet, har jeg lavet mit lærred, og bredden og højden af billedet og værdierne for selecetd-farven vises i indgange for lettere valg.
Du skal også tilføje jQuery til din side, da vi vil bruge nogle jQuery-kode.
Det første, vi skal gøre for at få farvevælgeren til at arbejde, er at få lærredet og dets kontekst, og at gøre alt, hvad vi har brug for, er en kodekode, som sådan:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nu da vi har lærredselementet og dets kontekst, kan vi starte med at indstille billedet som baggrunden for lærredet. For at gøre dette skal vi oprette et billedobjekt og gøre kilden til webadressen for billedet. Når dette billede er indlæst, skal vi tegne det i lærredet:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Hidtil så godt, right?
Nå, det er den del, hvor vi skal definere, hvad der sker, når du klikker et eller andet sted i lærredet, og hvis du tænker på det, skal du først få brugerens markørposition i lærredet for at se, hvor de klikker sådan som:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Med disse to linjer kode kan vi se, hvor brugeren klikker, og hvad vi laver er at få koordinaterne af, hvor brugeren klikker og derefter trækker fra det forskud på lærredet. Det vil fortælle os, hvor brugeren klikker i forhold til lærredets placering.
Vores næste skridt er at få RGB-værdierne for det sted brugeren har klikket på og for at gøre det, skal vi bruge funktionen getImageData og vedhæfte klikets x og y-position:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Vi har nu disse værdier gemt i R, G og B variabler, men vi vil vise denne information til brugeren på en måde, de let kan læse den, så vi skal oprette en RGB-variabel, der holder disse tre værdier separeret med kommaer og derefter præsenter dette som værdien af et af vores indtastningsfelter:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Og hvis du tester det nu, har du allerede en fuldt funktionel farvevælger, der henter RGB-værdien af hvor som helst du klikker, men for at gøre dette lidt bedre kan vi tilføje en funktion fra Javascripter der konverterer RGB værdier til HEX værdier; funktionen 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);}Nu da vi fik denne funktion, er alt, hvad vi skal gøre for at præsentere HEX værdierne, udfør funktionen med vores RBG værdier, og indstil derefter værdien af indgangen for at være HEX farve med en # før og med funktionen allerede på plads er ret simpelt:
// 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åber at med denne tutorial har du indset det potentiale der er i at skabe apps med lærred. Der er mange mere avancerede apps derude, folk gør endda spil med lærred, så det er en ting at udforske, fordi du kan bygge nogle fantastiske ting med det.
Hvilke andre anvendelser har du fundet for lærred? Hvad vil du gerne kunne bruge det til? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, farvevælger billede via Shutterstock.