Das Erstellen von Canvas-Apps ist das Neue, wir können damit sogar Spiele erstellen, es wird in allen gängigen Browsern sowohl auf dem Desktop als auch auf Mobilgeräten unterstützt und ist daher eine praktikablere 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 erfordert. Sie benötigen lediglich einen Texteditor und einen Browser.
Bevor wir beginnen, schauen Sie sich an, was wir hier bauen werden. Sie können die Quelldateien auch hier herunterladen. Beachten Sie, dass Sie zum lokalen Testen der Demo einen anderen Browser als Chrome verwenden müssen. Das Sicherheitsmodell von Chrome bedeutet, dass das Skript nur online funktioniert.
Der HTML
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 eine Stelle, an der unsere ausgewählte Farbe in RGB- und HEX-Formaten angezeigt wird. Alles, was wir brauchen, ist also Folgendes:
Da wir ein Hintergrundbild mit der Farbpalette verwenden werden, habe ich meine Leinwand auf die Breite und Höhe dieses Bildes angepasst und die Werte für die ausgewählte Farbe werden zur einfacheren Auswahl in den Eingaben angezeigt.
Sie sollten Ihrer Seite auch jQuery hinzufügen, da wir jQuery-Code verwenden werden.
Das JavaScript
Das erste, was wir tun müssen, damit der Farbwähler funktioniert, ist, die Leinwand und ihren Kontext abzurufen. Dazu benötigen wir lediglich eine Codezeile, etwa so:
var canvas = document.getElementById(‘canvas_picker’).getContext(‘2d’);
Nachdem wir nun das Canvas-Element und seinen Kontext haben, können wir damit beginnen, das Bild als Hintergrund der Canvas festzulegen. Dazu müssen wir ein Bildobjekt erstellen und dessen Quelle zur URL des Bildes machen. Wenn dieses Bild geladen ist, müssen wir es in die Leinwand zeichnen:
var img = neues Bild();
img.src=”https://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/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 auf die Leinwand klicken. Wenn Sie darüber nachdenken, müssen Sie zunächst die Cursorposition des Benutzers auf der Leinwand ermitteln, um zu sehen, wo er geklickt hat, etwa so:
$(‘#canvas_picker’).click(function(event){
var x = event.pageX – this.offsetLeft;
var y = event.pageY – this.offsetTop;
Mit diesen beiden Codezeilen können wir sehen, wo der Benutzer geklickt hat. Wir ermitteln die Koordinaten der Stelle, an der der Benutzer geklickt hat, und subtrahieren davon dann den Versatz der Leinwand. Dadurch erfahren wir, wo der Benutzer relativ zur Position der Leinwand geklickt hat.
Unser nächster Schritt besteht darin, die RGB-Werte der Stelle zu ermitteln, auf die der Benutzer geklickt hat. 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 den Variablen R, G und B gespeichert, aber wir möchten diese Informationen dem Benutzer so anzeigen, dass er sie leicht lesen kann. Deshalb müssen wir eine RGB-Variable erstellen, die diese drei Werte durch Kommas getrennt enthält und dann Präsentieren Sie dies als Wert eines unserer Eingabefelder:
var rgb = R + ‘,’ + G + ‘,’ + B;
$(‘#rgb-Eingabe’).val(rgb);
});
Und wenn Sie es jetzt testen, verfügen Sie bereits über einen voll funktionsfähigen Farbwähler, der den RGB-Wert an jeder Stelle abruft, auf die Sie klicken. Um dies jedoch noch ein wenig zu verbessern, können wir eine Funktion hinzufügen Javascripter das konvertiert RGB-Werte in HEX-Werte; Die Funktion ist:
Funktion rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
Funktion toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return „00“;
n = Math.max(0,Math.min(n,255));return “0123456789ABCDEF”.charAt((nn%16)/16) + “0123456789ABCDEF”.charAt(n%16);
}
Nachdem wir nun diese Funktion erhalten haben, müssen wir zur Darstellung der HEX-Werte nur noch die Funktion mit unseren RBG-Werten ausführen und dann den Wert der Eingabe mit einem # davor und mit bereits vorhandener Funktion auf HEX-Farbe setzen ist ganz einfach:
// nach der Deklaration der RGB-Variablen
var hex = rgbToHex(R,G,B);
// nach dem Setzen des RGB-Wertes
$(‘#hex input’).val(‘#’ + hex);
Der vollständige Code