如何使用颜色选择器作为画布笔触颜色？

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);