如何为画布描边颜色使用颜色选择器？

Question

在我的基本画布绘画工具中，我希望用户能够使用颜色选择器来更改笔触的颜色。所以我希望ctx.strokeStyle 更改为用户在颜色选择器上选择的任何颜色。我已经设法使用input type="color" 将颜色选择器添加到画布，但我想知道如何使画布中的笔触/画笔的颜色根据颜色选择器中选择的颜色而改变。

所以这是我现在的画布：

我希望用户使用这个来改变笔触颜色：

Answer 1

根据您发布的图片，您似乎想要在他的回答中发布类似 markE 的解决方案。虽然，在你提到的文字中type="color"。如果你想使用这个输入，你可以检查这个jsfiddle 工作。在第二种情况下，请记住很多浏览器还不支持它。如果您想查看支持它的浏览器列表，请单击here。

下面我将尝试详细说明我对您的 jsfiddle 所做的更改。

首先，您需要为颜色input 设置回调。这意味着当输入的值发生变化时，它会调用方法change。函数change 获取输入的value 并设置在一个名为color 的全局变量中。

var color = "rgb(255,0,0)";
function change(e){
    color = this.value;
}
document.getElementById("color").onchange = change;

另一个变化是在您的 draw 函数中。在抽奖之前，它获取变量color 中的值。这样，下次更改颜色时，它会更新笔划中使用的颜色。

ctx.strokeStyle = color;

通过这些更改，如果将来您决定使用其他工具来获取颜色（例如，您可以检查 browser 以查看它是否支持 input="color" 并在这种情况下使用不同的颜色选择器)，您只需在变量color 中设置新颜色即可。

Answer 2

以下是“工具”画布上用于在绘图画布上设置当前颜色（填充/描边）的颜色选择器的简单示例：

Javascript paint Canvas, need help re-locating buttons?

对于您的“色轮”选择器，您可以在工具画布上绘制色轮，然后使用 context.getImageData 抓取鼠标光标下的像素颜色数据。

var imgData=ctx.getImageData(mouseX,mouseY,1,1);

var data=imgData.data;

return("rgba("+data[0]+","+data[1]+","+data[2]+","+data[3]+")");

用户在工具画布上选择颜色后，您可以使用 context.strokeStyle 和 context.fillStyle 使这些颜色在绘图画布上处于活动状态。

Answer 3

您需要做的就是获取颜色输入的值并将strokeStyle 设置为该值。

Live Demo

var points=new Array(),
    colorInput = document.getElementById("color");

        function start(e){
          var mouseX = e.pageX - canvas.offsetLeft;
          var mouseY = e.pageY - canvas.offsetTop;
          paint = true;
          ctx.beginPath();
          ctx.moveTo(mouseX,mouseY);
          points[points.length]=[mouseX,mouseY];
        };

        function draw(e){

          if(paint){
             var mouseX = e.pageX - canvas.offsetLeft;
             var mouseY = e.pageY - canvas.offsetTop; 
             ctx.lineTo(mouseX,mouseY);
             ctx.stroke();  

             // set the value to the color input
             ctx.strokeStyle = colorInput.value;

             ctx.lineJoin = ctx.lineCap = 'round';

             points[points.length]=[mouseX,mouseY];
          }

        }
        function stop(e){
          paint=false;
         var s=JSON.stringify(points);
            localStorage['lines']=s;
        }  



        var paint=false;
        var canvas = document.getElementById('myCanvas');
        var ctx=canvas.getContext("2d");
        canvas.addEventListener('mousedown',start);
        canvas.addEventListener('mousemove',draw);
        canvas.addEventListener('mouseup',stop);