Creare app su tela è la cosa nuova, possiamo persino creare giochi con esso, è supportato in tutti i principali browser sia desktop che mobili e questo lo rende una soluzione più valida rispetto all'utilizzo di Flash.
In questo tutorial useremo l'elemento canvas per creare un semplice selettore di colori che non richiede Flash, tutto ciò di cui avrete bisogno è un editor di testo e un browser.
Prima di iniziare, dai un'occhiata a cosa costruiremo Qui. Puoi anche scaricare i file sorgente Qui. Nota che se testerai la demo localmente, dovrai utilizzare un browser diverso da Chrome; Il modello di sicurezza di Chrome indica che lo script funzionerà solo online.
Per questo esempio l'HTML sarà molto minimale, tutto ciò di cui abbiamo bisogno per far funzionare il color picker è un elemento canvas e un posto dove mostrare il nostro colore selezionato in RGB e nei formati HEX, quindi tutto ciò di cui abbiamo bisogno è questo:
HEX: RGB: Dato che useremo un'immagine di sfondo con il pallet di colore, ho reso la mia tela la larghezza e l'altezza di quell'immagine e i valori per il colore selezionato appariranno negli input per una selezione più semplice.
Dovresti anche aggiungere jQuery alla tua pagina poiché useremo del codice jQuery.
La prima cosa che dobbiamo fare per far funzionare il color picker è quella di ottenere la tela e il suo contesto e per fare tutto ciò di cui abbiamo bisogno è una linea di codice, in questo modo:
var canvas = document.getElementById('canvas_picker').getContext('2d');Ora che abbiamo l'elemento canvas e il suo contesto, possiamo iniziare impostando l'immagine come sfondo della tela. Per fare questo abbiamo bisogno di creare un oggetto immagine e rendere la sua fonte l'URL dell'immagine. Quando questa immagine è stata caricata, dobbiamo disegnarla nella tela:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Fin qui tutto bene, giusto?
Bene, questa è la parte in cui dobbiamo definire cosa succede quando fai clic da qualche parte nell'area di disegno e, se ci pensi, devi prima ottenere la posizione del cursore dell'utente nell'area di disegno per vedere dove hanno fatto clic, in questo modo:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Con queste due linee di codice possiamo vedere dove l'utente ha fatto clic e ciò che stiamo facendo è ottenere le coordinate di dove l'utente ha fatto clic e quindi sottrarre dall'offset della tela. Questo ci dirà dove l'utente ha fatto clic rispetto alla posizione della tela.
Il nostro prossimo passo è quello di ottenere i valori RGB del luogo su cui l'utente ha fatto clic e per farlo abbiamo bisogno di usare la funzione getImageData e collegare la posizione x e y del clic:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Ora abbiamo questi valori memorizzati all'interno delle variabili R, G e B ma vogliamo mostrare queste informazioni all'utente in un modo in cui possono facilmente leggerlo, quindi dobbiamo creare una variabile RGB che contenga questi tre valori separati da virgole e quindi presente come valore di uno dei nostri campi di input:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});E se lo provi ora hai già un selettore di colori completamente funzionale che recupera il valore RGB ovunque tu clic, ma per rendere questo un po 'meglio possiamo aggiungere una funzione da Javascripter che converte i valori RGB in valori HEX; la funzione è:
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);}Ora che abbiamo questa funzione, tutto ciò che dobbiamo fare per presentare i valori HEX è eseguire la funzione con i nostri valori RBG e quindi impostare il valore dell'ingresso in HEX con un # prima e con la funzione già presente è abbastanza semplice:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Spero che con questo tutorial tu abbia compreso il potenziale che c'è nella creazione di app con canvas. Ci sono app molto più avanzate là fuori, le persone stanno persino facendo giochi con la tela quindi è una cosa da esplorare perché puoi creare cose incredibili con essa.
Quali altri usi hai trovato per Canvas? Per cosa vorresti essere in grado di usarlo? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine color picker via Shutterstock.