Question

我正在使用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，以便我可以使用它们的颜色？

我感谢所有答案。

Answer 1

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

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

现在您需要获取所有html颜色元素并将click eventListener应用于每个DOM（html元素）对象。要获得所有颜色元素，您可以执行此操作：

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

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

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中定义的值特别的元素。

现在您需要做的就是将颜色应用于draw方法（在putPoint函数中），以便在画布上显示。您可以使用以下方法执行此操作：

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

这将改变笔触颜色和内部/填充颜色。

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

Answer 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可以看到它的实际效果。

HTM5 Canvas Drawing App：如何选择颜色？

2 个答案: