Skapa nyckelprogram är det nya, vi kan till och med skapa spel med det, det stöds i alla större webbläsare både skrivbord och mobil, och det gör det till en mer lönsam lösning än att använda Flash.
I denna handledning kommer vi att använda dukelementet för att skapa en enkel färgplockare som inte kräver någon Flash, allt du behöver är en textredigerare och en webbläsare.
Innan vi börjar, ta en titt på vad vi ska bygga här. Du kan också ladda ner källfilerna här. Observera att om du ska testa demoen lokalt måste du använda en annan webbläsare än Chrome; Kroms säkerhetsmodell innebär att manuset bara fungerar online.
För det här exemplet är HTML mycket minimal, allt vi behöver för att färgplockaren ska fungera är ett dukelement och en plats för att visa vår valda färg i RGB och HEX-format, så allt vi behöver är detta:
HEX: RGB: Eftersom vi kommer att använda en bakgrundsbild med färgpalleten gjorde jag min kanfas bredden och höjden på den bilden och värdena för selecetd-färgen visas i ingångarna för enklare val.
Du bör också lägga till jQuery på din sida eftersom vi kommer att använda någon jQuery-kod.
Det första vi behöver göra för att få färgplockaren att arbeta är att få duken och dess sammanhang och att göra att allt vi behöver är en kodlinje, som så:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nu när vi har kanvaselementet och dess sammanhang kan vi börja med att ställa in bilden som bakgrunden av duken. För att göra detta behöver vi skapa ett bildobjekt och göra källan till webbadressen för bilden. När den här bilden har laddats måste vi dra in den i duken:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Hittills så bra, eller hur?
Nåväl, det här är den del där vi behöver definiera vad som händer när du klickar någonstans i duken och om du tänker på det måste du först få användarens markörposition i duken för att se var de klickade på, så här:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Med dessa två kodserier kan vi se var användaren klickade och vad vi gör är att få koordinater av var användaren klickade på och sedan subtraherade från det förskjutet av duken. Det kommer att berätta för oss var användaren klickade i förhållande till läget på duken.
Vårt nästa steg är att få RGB-värdena för den plats som användaren klickade på och för att vi ska kunna använda funktionen getImageData och fästa klickets x och 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 dessa värden lagrade i R, G och B variabler men vi vill visa den här informationen för användaren på ett sätt som de enkelt kan läsa det så vi måste skapa en RGB-variabel som håller dessa tre värden separerade med kommatecken och sedan presentera detta som värdet av ett av våra inmatningsfält:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Och om du testar det nu har du redan en helt funktionell färgplockare som hämtar RGB-värdet av var du än klickar, men för att göra det lite bättre kan vi lägga till en funktion från Javascripter som omvandlar RGB-värden till HEX-värden; funktionen är:
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 när vi har den här funktionen behöver vi bara göra för att presentera HEX-värdena, utföra funktionen med våra RBG-värden och ange sedan värdet på ingången för att vara HEX-färg med en # före och med funktionen redan på plats är ganska enkelt:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Jag hoppas att med denna handledning har du insett potentialen att skapa apps med kanfas. Det finns mycket mer avancerade appar där ute, människor gör även spel med kanfas så det är en sak att utforska eftersom du kan bygga några fantastiska saker med det.
Vilka andra användningsområden har du hittat för Canvas? Vad vill du kunna använda det för? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, färgväljare bild via Shutterstock.