如何将颜色选择器用于画布笔触颜色？

Question

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

所以这是我此刻的画布：

而且我希望用户使用此选项可以更改笔触颜色：

Answer 1

根据您发布的图片，看起来你想要一个像坊间的解决方案张贴在他的回答。尽管在文中您提到了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);