Créer des applications de canevas est la nouvelle chose, nous pouvons même créer des jeux avec elle, elle est prise en charge dans tous les principaux navigateurs à la fois pour PC et mobiles, ce qui en fait une solution plus viable que l'utilisation de Flash.
Dans ce didacticiel, nous allons utiliser l'élément canvas pour créer un sélecteur de couleur simple ne nécessitant aucun Flash. Tout ce dont vous avez besoin, c'est d'un éditeur de texte et d'un navigateur.
Avant de commencer, jetez un oeil à ce que nous allons construire ici. Vous pouvez également télécharger les fichiers source ici. Notez que si vous allez tester la démo localement, vous devrez utiliser un navigateur autre que Chrome; Le modèle de sécurité de Chrome signifie que le script ne fonctionnera qu'en ligne.
Pour cet exemple, le code HTML sera très minimal, tout ce dont nous avons besoin pour que le sélecteur de couleur fonctionne est un élément canvas et un endroit pour montrer notre couleur sélectionnée au format RVB et HEX.
HEX: RGB: Comme nous allons utiliser une image de fond avec la palette de couleurs, j'ai fait de ma toile la largeur et la hauteur de cette image et les valeurs de la couleur sélecetd apparaîtront dans les entrées pour faciliter la sélection.
Vous devriez également ajouter jQuery à votre page car nous utiliserons du code jQuery.
La première chose que nous devons faire pour que le sélecteur de couleur fonctionne est d’obtenir le canevas et son contexte, et tout ce dont nous avons besoin est une ligne de code, comme ceci:
var canvas = document.getElementById('canvas_picker').getContext('2d');Maintenant que nous avons l'élément canvas et son contexte, nous pouvons commencer par définir l'image comme arrière-plan du canevas. Pour ce faire, nous devons créer un objet image et en faire sa source l'URL de l'image. Lorsque cette image est chargée, nous devons la dessiner dans le canevas:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Jusqu'ici tout va bien, non?
Eh bien, c'est la partie où nous devons définir ce qui se passe lorsque vous cliquez quelque part dans le canevas, et si vous y réfléchissez, vous devez d'abord obtenir la position du curseur de l'utilisateur dans le canevas pour voir où ils ont cliqué.
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Avec ces deux lignes de code, nous pouvons voir où l’utilisateur a cliqué et ce que nous faisons consiste à obtenir les coordonnées de l’utilisateur sur lequel il a cliqué, puis à en soustraire le décalage. Cela nous indiquera où l'utilisateur a cliqué par rapport à la position de la toile.
L'étape suivante consiste à obtenir les valeurs RVB du lieu sur lequel l'utilisateur a cliqué. Pour ce faire, nous devons utiliser la fonction getImageData et attacher la position x et y du clic:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Nous avons maintenant ces valeurs stockées dans les variables R, G et B, mais nous voulons afficher ces informations à l’utilisateur de manière à pouvoir les lire facilement. Nous devons donc créer une variable RVB contenant ces trois valeurs séparées par des virgules, puis présentez ceci comme la valeur de l'un de nos champs d'entrée:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Et si vous le testez maintenant, vous avez déjà un sélecteur de couleurs entièrement fonctionnel qui récupère la valeur RVB de l'endroit où vous cliquez, mais pour améliorer cela, nous pouvons ajouter une fonction à partir de Javascripter qui convertit les valeurs RVB en valeurs HEX; la fonction est:
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);}Maintenant que nous avons cette fonction, tout ce que nous avons à faire pour présenter les valeurs HEX est d’exécuter la fonction avec nos valeurs RBG, puis de définir la valeur de la couleur HEX avec un # avant et avec la fonction déjà en place. est assez simple:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: J'espère qu'avec ce tutoriel, vous avez réalisé le potentiel de créer des applications avec canvas. Il ya beaucoup d’applications plus avancées, les gens font même des jeux avec des canevas, c’est une chose à explorer parce que vous pouvez créer des choses étonnantes.
Quelles autres utilisations avez-vous trouvées pour Canvas? A quoi aimeriez-vous pouvoir l'utiliser? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image du sélecteur de couleur via Shutterstock.