Verwenden Sie die HTML5-Technologie, um Ihre eigenen coolen Farbauswahl-Tutorialfähigkeiten zu entwickeln

Sie haben vielleicht viele Farbwähler gesehen, die mit jquery/js entwickelt wurden. Heute werden wir die HTML5-Technologie verwenden, um selbst einen besseren Farbwähler zu implementieren. Ich hoffe, es gefällt euch allen!

Code kopieren Der Code lautet wie folgt: "> R " id= "bVal" /> RGB HEX ;/div&gt ;

Der Code ist sehr einfach und besteht aus zwei Teilen, einem Klickelement und einem Element zur Anzeige der Farbauswahl.

JavaScript-Code

Code kopieren

Der Code lautet wie folgt: $(function(){ var bCanPreview = true; // kann eine Vorschau anzeigen // Canvas- und Kontextobjekte erstellen var canvas = document.getElementById('picker') ; var ctx = canvas.getContext('2d'); / aktives Bild zeichnen var image = new Image(); ctx .drawImage( image, 0, 0, image.width, image.height); // das Bild auf die Leinwand zeichnen } // gewünschtes Farbrad auswählen var imagesrc="images/colorwheel1.png "; switch ($(canvas).attr('var')) { case '2': imagesrc="images/colorwheel2.png"; break; case '3': imagesrc="images/colorwheel3.png"; case '4': imagesrc="images/colorwheel4.png"; >case ' 5': imagesrc="images/colorwheel5.png"; break; } image.src = imageSrc; function(e) { // Mausbewegungshandler if (bCanPreview) { // Koordinaten der aktuellen Position abrufen var canvasOffset = $(canvas).offset( var canvasX = Math .floor( e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); , canvasY, 1, 1); var pixel = imageData.data // Vorschaufarbe aktualisieren var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", pixel[2 ] ")"; $('.preview').css('backgroundColor', pixelColor); 0]) ; $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); '). val(pixel[0] ',' pixel[1] ',' pixel[2]); >$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6)); $('# picker') .click(function(e) { // Click-Event-Handler bCanPreview = !bCanPreview; } $('.preview').click(function(e) { // Vorschauklick $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true;

Jeder Wie Sie sehen können, handelt es sich um einen sehr kurzen JS-Code, der zum Erstellen einer neuen Leinwand und eines neuen Objekts verwendet wird. Anschließend zeichnen wir eine kreisförmige Farbplatte. Sie können verschiedene Grundplattenfarben wählen. Hier wird ein Parameter verwendet, um verschiedene Optionen festzulegen. Wie folgt:

Code kopieren

Der Code lautet wie folgt:

="html" name="code"> Jetzt fügen wir Ereignisse hinzu: Mausbewegungs- und Klickereignisse. jQuery wird hier verwendet, um den Selektor anzuzeigen und auszublenden.

Code kopieren Der Code lautet wie folgt: $('.preview' ).click (function(e) { // Vorschau klicken $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true; }); Wenn unser Mausbewegungen Auf dem ausgewählten Objekt müssen wir die Informationen aktualisieren

Kopieren Sie den Code Der Code lautet wie folgt: $('#picker').mousemove(function(e) { // Mausbewegungshandler if (bCanPreview) { // Koordinaten abrufen der aktuellen Position var canvasOffset = $ (canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); - canvasOffset.top); / / aktuelles Pixel abrufen var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; color var pixelColor = "rgb( " pixel[0] ", " pixel[1] ", " pixel[2] ")" $('.preview').css('backgroundColor', pixelColor); // Steuerelemente aktualisieren $('#rVal').val(pixel[0]); >$('#bVal').val (pixel[2]); $('#rgbVal').val(pixel[0] ',' pixel[1] ',' pixel[2]); var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0]; $('#hexVal').val('#' ('0000' dColor.toString(16)) .substr(-6)); } }); $('#picker').click(function(e) { // click event handler bCanPreview = !bCanPreview; });

CSS-Code CSS für verschiedene Farbgrundplatten:

Code kopieren Der Code lautet wie folgt: /* Farbauswahlstile */ .colorpicker { Hintergrundfarbe: #222222 ; Randradius: 5px 5px 5px; Farbe: #FFFFFF; Position: absolut; Breite: 460px } Cursor: Fadenkreuz; Rand: 0; } 🎜>.controls { float: right; margin: 10px } .controls > div { border: 1px solid #2F2F2F; ; Überlauf: versteckt; .controls label { float: left; .controls > Hintergrundfarbe: #121212; Rahmen: #2F2F2F;Float: rechts; Höhe: 14px; >margin-left: 6px; text-align: centre; width: 75px; background: url(" ../images/select.png") wiederholen Scroll-Mitte Mitte transparent; border-radius: 3px; box-shadow: 2px 2px 2px #444444; Cursor: Zeiger; height: 30px; Breite: 30px }

Ich hoffe, es gefällt euch allen

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Verwenden Sie die HTML5-Technologie, um Ihre eigenen coolen Farbauswahl-Tutorialfähigkeiten zu entwickeln