HTM5 Canvas Drawing App: Comment sélectionner la couleur?

Question

Je construis cette application de dessin avec HTML5 et Javascript.

J'ai rendu possible de dessiner sur la toile, mais quand il s'agit de pouvoir sélectionner les différentes couleurs que j'ai et de l'utiliser comme un moyen de dessiner sur la toile, je me sens coincé.

Voici mon actuelle JS:

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var radius = 10; 
var dragging = false; 

context.lineWidth = radius * 2; 

var putPoint = function(e){ 
    if(dragging){ 
     context.lineTo(e.offsetX, e.offsetY); 
     context.stroke(); 
     context.beginPath(); 
     context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2); 
     context.fill(); 
     context.beginPath(); 
     context.moveTo(e.offsetX, e.offsetY); 
    } 
} 

var engage = function(e){ 
    dragging = true; 
    putPoint(e); 
} 

var disengage = function(){ 
    dragging = false; 
} 


canvas.addEventListener('mousedown', engage); 
canvas.addEventListener('mousemove', putPoint); 
canvas.addEventListener('mouseup', disengage); 

///////////////////// 

Voici le lien vers le codepen pour avoir une idée claire de là où je suis à:

https://codepen.io/teenicarus/pen/oGVwdB

Comment puis-je permettent de cliquer sur sur les différents divs afin que je puisse utiliser leur couleur?

J'apprécie toutes les réponses.

Answer 1

La première chose que vous devez faire est de créer une variable de couleur en haut de votre code pour maintenir la valeur de la couleur actuelle l'utilisateur utilise:

var color = "black"; // Initial, default color 

Maintenant, vous devez obtenir tout votre code html Ajoutez des éléments de couleur et appliquez le clickeventListener à chacun de vos objets DOM (élément html). Pour obtenir tous les éléments de couleur que vous pouvez faire ceci:

var colors = document.getElementsByClassName("color"); 

Ensuite, vous pouvez faire une boucle à travers chacun de vos éléments de couleur et ajoutez l'écouteur d'événement de clic pour elle en faisant ceci:

for (var i = 0; i < colors.length; i++) { 
    colors[i].addEventListener('click', changeColor, false); // Adds the click event listener to each color element 
} 

ci-dessus Le code indique qu'une fois qu'un élément de couleur est cliqué, il appellera la fonction changeColor. Ainsi, nous pouvons écrire une fonction qui obtient la couleur de l'élément que nous cliquons et de changer la valeur de color à la couleur nous avons cliqué sur (la couleur définie par les éléments data-color attribut

var changeColor = function(e) { 
    color = this.getAttribute("data-color"); // Change the color to what is defined in "data-color" 
} 

Maintenant, chaque fois que vous cliquez sur sur vos éléments HTML de couleur, la fonction changeColor sera appelée, et changer ainsi la valeur de color à la valeur que vous avez défini dans data-color pour cet élément particulier.

maintenant, tout ce que vous devez faire est d'appliquer la couleur à votre tirage méthode (dans votre fonction putPoint) de sorte qu'il affiche sur la toile .Vous pouvez le faire en utilisant :

context.strokeStyle = color; 
context.fillStyle = color; 

Cela va changer la couleur de trait et la couleur intérieure/de remplissage.

Un exemple de travail se trouvent ici: https://codepen.io/clapynick/pen/pWYrPj?editors=1010