Das Erstellen von Canvas-Apps ist das Neue, wir können sogar Spiele damit erstellen, es wird in allen gängigen Browsern sowohl auf dem Desktop als auch auf Mobilgeräten unterstützt, und das macht es zu einer praktikableren Lösung als die Verwendung von Flash.
In diesem Tutorial verwenden wir das canvas-Element, um einen einfachen Farbwähler zu erstellen, der kein Flash benötigt. Sie benötigen lediglich einen Texteditor und einen Browser.
Bevor wir anfangen, schauen wir uns an, was wir bauen werden Hier. Sie können auch die Quelldateien herunterladen Hier. Wenn Sie die Demo lokal testen möchten, müssen Sie einen anderen Browser als Chrome verwenden. Das Sicherheitsmodell von Chrome bedeutet, dass das Skript nur online funktioniert.
Für dieses Beispiel wird der HTML-Code sehr minimal sein. Alles was wir brauchen, damit der Farbwähler funktioniert, ist ein Canvas-Element und ein Platz, um unsere ausgewählte Farbe in RGB- und HEX-Formaten zu zeigen.
HEX: RGB: Da wir ein Hintergrundbild mit der Farbpalette verwenden werden, habe ich meine Leinwand die Breite und Höhe dieses Bildes gemacht und die Werte für die ausgewählte Farbe erscheinen in den Eingaben für eine einfachere Auswahl.
Sie sollten jQuery auch zu Ihrer Seite hinzufügen, da wir einen jQuery-Code verwenden werden.
Das erste, was wir tun müssen, damit der Farbwähler funktioniert, ist, die Zeichenfläche und ihren Kontext zu bekommen und alles zu tun, was wir brauchen, ist eine Codezeile, so:
var canvas = document.getElementById('canvas_picker').getContext('2d');Jetzt, wo wir das canvas-Element und seinen Kontext haben, können wir damit beginnen, das Bild als Hintergrund der Leinwand festzulegen. Dazu müssen wir ein Bildobjekt erstellen und seine Quelle zur URL des Bildes machen. Wenn dieses Bild geladen ist, müssen wir es in die Leinwand zeichnen:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});So weit, so gut, oder?
Nun, das ist der Teil, in dem wir definieren müssen, was passiert, wenn Sie irgendwo in die Zeichenfläche klicken. Wenn Sie darüber nachdenken, müssen Sie zuerst die Cursorposition des Benutzers in der Zeichenfläche abrufen, um zu sehen, wo sie geklickt haben.
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Mit diesen zwei Codezeilen können wir sehen, wo der Benutzer geklickt hat und was wir tun, ist die Koordinaten des Ortes, an dem der Benutzer geklickt hat, und dann den Offset des Canvas davon subtrahieren. Dadurch erfahren wir, wo der Benutzer relativ zur Position der Zeichenfläche geklickt hat.
Unser nächster Schritt besteht darin, die RGB-Werte des Platzes, auf den der Benutzer geklickt hat, zu erhalten. Dazu müssen wir die Funktion getImageData verwenden und die X- und Y-Position des Klicks anhängen:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Wir haben diese Werte jetzt in R-, G- und B-Variablen gespeichert, möchten diese Informationen jedoch dem Benutzer so anzeigen, dass sie sie leicht lesen können. Daher müssen wir eine RGB-Variable erstellen, die diese drei durch Kommas getrennten Werte enthält Präsentiere dies als Wert eines unserer Eingabefelder:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Und wenn Sie es jetzt testen, haben Sie bereits einen voll funktionsfähigen Farbwähler, der den RGB-Wert von jedem Ort, auf den Sie klicken, abruft, aber um das ein bisschen besser zu machen, können wir eine Funktion hinzufügen Javascripter das konvertiert RGB-Werte in HEX-Werte; die Funktion ist:
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);}Nun, da wir diese Funktion haben, müssen wir nur noch die Funktion mit unseren RBG-Werten durchführen und dann den Wert der Eingabe als HEX-Farbe mit einem # vor und mit der Funktion bereits setzen ist ganz einfach:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Ich hoffe, dass Sie mit diesem Tutorial das Potenzial für die Erstellung von Apps mit Canvas erkannt haben. Es gibt viel mehr fortgeschrittene Apps da draußen, Leute machen sogar Spiele mit Canvas, also ist es eine Sache zu erforschen, weil man damit einige erstaunliche Dinge bauen kann.
Welche anderen Anwendungen haben Sie für Canvas gefunden? Wofür möchten Sie es verwenden können? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Farbwähler Bild über Shutterstock.