Tworzenie nowych aplikacji na płótno to coś nowego, możemy nawet tworzyć z nim gry, jest ono obsługiwane we wszystkich głównych przeglądarkach, zarówno na komputerach stacjonarnych, jak i na urządzeniach przenośnych, dzięki czemu jest bardziej realnym rozwiązaniem niż używanie Flasha.
W tym samouczku zamierzamy użyć elementu canvas do utworzenia prostego selektora kolorów, który nie wymaga Flasha, wystarczy edytor tekstu i przeglądarka.
Zanim zaczniemy, zobacz, co zbudujemy tutaj. Możesz również pobrać pliki źródłowe tutaj. Pamiętaj, że jeśli zamierzasz testować wersję demo lokalnie, musisz użyć przeglądarki innej niż Chrome; Model zabezpieczeń Chrome oznacza, że skrypt działa tylko online.
W tym przykładzie HTML będzie bardzo minimalny, wszystko, czego potrzebujemy, aby narzędzie do wybierania kolorów działało, to element canvas i miejsce do pokazania wybranego przez nas koloru w formatach RGB i HEX, więc potrzebujemy tylko tego:
HEX: RGB: Ponieważ użyjemy obrazu tła z paletą kolorów, zrobiłem płótno na szerokość i wysokość tego obrazu, a wartości dla zaznaczonego koloru pojawią się na wejściach dla łatwiejszego wyboru.
Powinieneś również dodać jQuery do swojej strony, ponieważ będziemy używać kodu jQuery.
Pierwszą rzeczą, którą musimy zrobić, aby narzędzie do wybierania kolorów działało, jest pobranie obszaru roboczego i jego kontekstu, a wszystko, czego potrzebujemy, to linia kodu, na przykład:
var canvas = document.getElementById('canvas_picker').getContext('2d');Teraz, gdy mamy element canvas i jego kontekst, możemy zacząć od ustawienia obrazu jako tła płótna. Aby to zrobić, musimy utworzyć obiekt obrazu i uczynić jego źródło adresem URL obrazu. Po załadowaniu tego obrazu musimy go narysować na płótnie:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Jak dotąd tak dobrze, prawda?
Cóż, to jest ta część, w której musimy zdefiniować, co dzieje się po kliknięciu gdzieś w obszarze roboczym, a jeśli o tym pomyślisz, musisz najpierw uzyskać pozycję kursora użytkownika w obszarze roboczym, aby zobaczyć, gdzie kliknął, na przykład:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Dzięki tym dwóm wierszom kodu widzimy, gdzie użytkownik kliknął, a co robimy, to uzyskanie współrzędnych miejsca, w którym użytkownik kliknął, a następnie odjęcie od tego przesunięcia płótna. To powie nam, gdzie użytkownik kliknął w stosunku do pozycji płótna.
Naszym następnym krokiem jest uzyskanie wartości RGB miejsca klikniętego przez użytkownika, a do tego potrzebujemy funkcji getImageData i dołączenia pozycji x i y kliknięcia:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Mamy teraz te wartości zapisane w zmiennych R, G i B, ale chcemy wyświetlić te informacje użytkownikowi w taki sposób, aby mogły z łatwością go odczytać, więc musimy utworzyć zmienną RGB, która przechowuje te trzy wartości oddzielone przecinkami, a następnie pokaż to jako wartość jednego z naszych pól wejściowych:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Jeśli przetestujesz to teraz, masz już w pełni funkcjonalny selektor kolorów, który pobiera wartość RGB dowolnego kliknięcia, ale aby to trochę poprawić, możemy dodać funkcję z Przestroga który konwertuje wartości RGB do wartości HEX; funkcja to:
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);}Teraz, gdy mamy tę funkcję, wszystko, co musimy zrobić, aby przedstawić wartości HEX, to wykonać funkcję z naszymi wartościami RBG, a następnie ustawić wartość wejścia na kolor HEX z # przed i z funkcją już istniejącą. jest całkiem proste:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Mam nadzieję, że dzięki temu samouczkowi zdasz sobie sprawę z potencjału tworzenia aplikacji z płótnem. Istnieje wiele bardziej zaawansowanych aplikacji, ludzie nawet tworzą gry z płótna, więc jest to rzecz do odkrycia, ponieważ można zbudować z nim niesamowite rzeczy.
Jakie inne zastosowania znalazłeś w Canvas? Do czego chciałbyś go użyć? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, próbnik kolorów przez Shutterstock.