HTM5 画布绘图应用程序：如何选择颜色？答案

【问题标题】：HTM5 Canvas Drawing App: How Do I Select The Color?HTM5 画布绘图应用程序：如何选择颜色？
【发布时间】：2018-12-05 02:36:05
【问题描述】：

我正在使用 HTML5 和 Javascript 构建这个绘图应用程序。

我已经可以在画布上绘画，但是当谈到能够选择我拥有的不同颜色并将其用作在画布上绘画的一种方式时，我感觉卡住了。

这是我当前的 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);

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

这里是 codepen 的链接，可以清楚地了解我在哪里：

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

如何才能点击不同的 div 以便使用它们的颜色？

感谢所有答案。

【问题讨论】：

您的实际问题是什么？如何绑定点击处理程序？如何在画布上设置颜色？
@EvanKnowles 是的，如何在画布上设置颜色。例如：当我点击红色时，画布上会弹出红色
你可以通过设置fillStyle和strokeStyle来改变画布的颜色。

标签： javascript html canvas

【解决方案1】：

您需要做的第一件事是在代码顶部创建一个颜色变量来保存用户正在使用的当前颜色的值：

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

现在您需要获取所有 html 颜色元素并将 click eventListener 应用于每个 DOM（html 元素）对象。要获取所有颜色元素，您可以这样做：

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

然后你可以循环遍历你的每个颜色元素并通过这样做添加点击事件监听器：

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

上面的代码说一旦点击了一个颜色元素，它就会调用changeColor函数。因此，我们可以编写一个函数来获取我们单击的元素的颜色并将color 的值更改为我们单击的颜色（由元素data-color 属性定义的颜色

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

现在，每次您单击彩色 html 元素时，都会调用 changeColor 函数，从而将 color 的值更改为您在 data-color 中为该特定元素定义的值。

现在您需要做的就是将颜色应用到您的绘图方法（在您的putPoint 函数中），以便它显示在画布上。您可以使用：

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

这将改变描边颜色和内部/填充颜色。

可以在此处找到一个工作示例：https://codepen.io/clapynick/pen/pWYrPj?editors=1010

【讨论】：

【解决方案2】：

您可能想使用color input。此解决方案为您提供所有颜色。

将此输入元素添加到您的 HTML 文件中：

<input type="color" class="color" />

用户现在可以选择颜色了。

接下来，定位输入元素或其类以获取值（用户的选择）。你可以使用一个函数：

function getColor() {
    return document.querySelector(".color").value;
}

最后，设置strokeStyle调用getColor()：

context.strokeStyle = getColor();

或者，将输入值存储在变量中（将其命名为 color 或 userColor）并将 strokeStyle 设置为该变量。

我希望这会有所帮助。

请访问我的CodePen 以查看实际情况。

【讨论】：