Het creëren van canvas-apps is iets nieuws, we kunnen er zelfs games mee maken, het wordt ondersteund in alle grote browsers, zowel op desktop als mobiel, en dat maakt het een meer haalbare oplossing dan het gebruik van Flash.
In deze tutorial gaan we het canvas-element gebruiken om een eenvoudige kleurkiezer te maken die geen Flash vereist, alles wat je nodig hebt is een teksteditor en een browser.
Voordat we beginnen, kijk eens naar wat we gaan bouwen hier. U kunt ook de bronbestanden downloaden hier. Houd er rekening mee dat als u de demo lokaal gaat testen, u een andere browser dan Chrome moet gebruiken; Het beveiligingsmodel van Chrome betekent dat het script alleen online werkt.
Voor dit voorbeeld is de HTML zeer minimaal, alles wat we nodig hebben om de kleurenkiezer te laten werken is een canvaselement en een plaats om onze geselecteerde kleuren in RGB- en HEX-indeling weer te geven, dus alles wat we nodig hebben is dit:
HEX: RGB: Omdat we een achtergrondafbeelding met het kleurenpallet gebruiken, heb ik mijn canvas de breedte en hoogte van dat beeld gemaakt en de waarden voor de geselecteerde kleur verschijnen in de ingangen om de selectie te vergemakkelijken.
Je zou ook jQuery aan je pagina moeten toevoegen, omdat we een bepaalde jQuery-code zullen gebruiken.
Het eerste dat we moeten doen om de kleurenkiezer te laten werken, is om het canvas en de context ervan te krijgen en om dat te doen is alles wat we nodig hebben een coderegel, zoals:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nu we het canvas-element en de bijbehorende context hebben, kunnen we beginnen met het instellen van de afbeelding als de achtergrond van het canvas. Om dit te doen, moeten we een afbeeldingsobject maken en de bron ervan de URL van de afbeelding maken. Wanneer deze afbeelding is geladen, moeten we deze in het canvas tekenen:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Tot zover goed, toch?
Welnu, dit is het deel waar we moeten definiëren wat er gebeurt als je ergens in het canvas klikt, en als je erover nadenkt, moet je eerst de cursorpositie van de gebruiker in het canvas krijgen om te zien waar ze hebben geklikt, zoals:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Met deze twee coderegels kunnen we zien waar de gebruiker op heeft geklikt en wat we doen is de cordinaten ophalen van waar de gebruiker op heeft geklikt en vervolgens de offset van het canvas aftrekken. Dat zal ons vertellen waar de gebruiker heeft geklikt ten opzichte van de positie van het canvas.
Onze volgende stap is om de RGB-waarden te krijgen van de plaats waar de gebruiker op heeft geklikt en om dat te doen, hebben we de functie getImageData nodig en koppelen we de x- en y-positie van de klik:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];We hebben nu deze waarden opgeslagen in R-, G- en B-variabelen, maar we willen deze informatie aan de gebruiker laten zien op een manier die ze gemakkelijk kunnen lezen, dus we moeten een RGB-variabele maken waarin deze drie waarden worden gescheiden door komma's en vervolgens presenteer dit als de waarde van een van onze invoervelden:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});En als u het nu uitprobeert, hebt u al een volledig functionele kleurenkiezer die de RGB-waarde ophaalt overal waar u klikt, maar om dit een beetje beter te maken, kunnen we een functie toevoegen van Javascripter die RGB-waarden omzet in HEX-waarden; de functie is:
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 we deze functie hebben, hoeven we alleen de HEX-waarden te presenteren door de functie uit te voeren met onze RBG-waarden en vervolgens de waarde van de invoer als HEX-kleur in te stellen met een # ervoor en met de functie al op zijn plaats is vrij eenvoudig:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Ik hoop dat je met deze tutorial hebt begrepen wat het potentieel is om apps met canvas te maken. Er zijn veel meer geavanceerde apps beschikbaar, mensen maken zelfs games met canvas, dus het is een ding om te verkennen omdat je er geweldige dingen mee kunt bouwen.
Welke andere toepassingen heb je voor Canvas gevonden? Waar wil je het voor kunnen gebruiken? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, afbeelding kleurkiezer via Shutterstock.