Creați HTML5 «scrim“ (din limba engleză. «Sanvas») aplicații este o tendință nouă, cu ajutorul lor, putem crea chiar un joc, deoarece acestea sunt acceptate în toate browserele importante (de pe desktop la mobil), iar acest lucru le face soluție mai eficientă, umiraeschego decât utilizarea Flash.
În acest exemplu, codul HTML va fi foarte minimal - tot ceea ce avem nevoie pentru a lucra la paleta de culori - un element de pânză și loc pentru a arăta culoarea selectată în RGB și formate HEX. Asta e ceea ce avem nevoie:
Din moment ce vom folosi imaginea de fundal cu o paletă de culori, am făcut lățimea și înălțimea de panza corespunde dimensiunilor imaginii - 600 × 440 pixeli. De asemenea, trebuie să adăugăm jQuery la pagina noastră ca vom fi folosind codul jQuery.
Primul lucru pe care trebuie să facem pentru a face paleta de culori este de a obtine panza si contextul acesteia cu această linie de cod:
Acum, că avem elementul pânză și conținutul său, putem seta o imagine ca fundal panza. Pentru a face acest lucru avem nevoie pentru a crea imaginea și face o adresă URL sursă a imaginii. Odată ce imaginea este încărcat, trebuie să-l trageți la panza:
În această parte, avem nevoie pentru a determina ce se va întâmpla atunci când faceți clic oriunde pe pânză, dacă te gândești la asta, trebuie mai întâi pentru a obține poziția cursorului utilizatorului pe pânză, pentru a vedea unde au făcut clic. De exemplu, ca aceasta:
Cu aceste două linii de cod, putem vedea în cazul în care utilizatorul a făcut clic. Ceea ce facem este obține toate coordonatele în cazul în care utilizatorul a făcut clic și apoi scade din panza, care a compensat. O astfel de acțiune ne va arăta în cazul în care utilizatorul face clic pe o comparație cu situația pe pânză.
Următorul nostru pas este de a obtine valorile RGB, în cazul în care utilizatorul face clic. Pentru a face acest lucru avem nevoie pentru a utiliza funcția getImageData și atașați X și Y poziția de clic:
Acum avem valorile care sunt stocate în R, G și B sunt variabile, dar avem nevoie pentru a afișa aceste informații pentru utilizator, astfel încât acestea să poată citi cu ușurință. Prin urmare, avem nevoie pentru a crea variabila RGB, care va păstra aceste trei valori, separate prin virgulă, și apoi să le prezinte ca fiind una dintre valorile noastre de câmpuri de introducere:
Acum, că am luat această funcție tot ce trebuie să faceți pentru a depune o valoare HEX, care efectuează funcția valorii noastre RBG, iar apoi setați valoarea de intrare la culoare HEX la # și funcția este deja în vigoare. Este destul de simplu:
cod la cheie
ATENȚIE! Utilizați un browser învechit Internet Explorer
Acest site este construit pe tehnologii avansate, moderne și nu acceptă al doilea Internet Explorer și versiunea a șaptea.
