Utilisez la technologie HTML5 pour développer vos propres compétences de didacticiel color picker_html5

// créer des objets de canevas et de contexte
var canvas = document.getElementById('picker') ;
var ctx = canvas.getContext('2d');
// dessin de l'image active
var image = new Image();
image.onload = function () {
ctx .drawImage( image, 0, 0, image.width, image.height); // dessine l'image sur la toile
}
// sélectionne la roue chromatique souhaitée
var imagesrc="images/colorwheel1.png ";
switch ($(canvas).attr('var')) {
case '2':
imagesrc="images/colorwheel2.png";
break;
case '3' :
imagesrc="images/colorwheel3.png";
break;
case '4':
imagesrc="images/colorwheel4.png"; >case '5' :
imagesrc="images/colorwheel5.png";
break;
}
image.src = imageSrc; function(e ) { // gestionnaire de déplacement de la souris
if (bCanPreview) {
// obtient les coordonnées de la position actuelle
var canvasOffset = $(canvas).offset(); .floor( e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top
// obtenir le pixel actuel
var imageData = ctx.getImageData(canvasX); , canvasY, 1, 1);
var pixel = imageData.data;
// mettre à jour la couleur de l'aperçu
var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", " pixel[2 ] ")";
$('.preview').css('backgroundColor', pixelColor);
// mettre à jour les contrôles
$('#rVal').val(pixel[ 0]) ;
$('#gVal').val(pixel[1]);
$('#bVal').val(pixel[2]); '). 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) { // gestionnaire d'événements de clic
bCanPreview = !bCanPreview;
});
$('.preview').click(function(e) { //); aperçu cliquez
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
}); 🎜>Tout le monde Comme vous pouvez le voir, il s'agit d'un code js très court qui est utilisé pour créer un nouveau canevas et un nouveau objet, puis nous dessinons une plaque de couleur circulaire. Vous pouvez choisir des plaques de base de différentes couleurs. Un paramètre est utilisé ici pour définir différentes options. Comme suit :





Copier le code


Le code est le suivant :