Javascript 如何使用自定义颜色而不是预定义颜色

嗨，我想在我的项目中使用自定义定义的颜色，而不是使用随机颜色，因为其中一些颜色在我的背景上不可见。我的背景不是白色的，所以我如何才能做到这一点

我想创建一个下拉列表，从中我可以选择颜色和绘制图层，或者可以在randomcolors函数中自定义定义颜色

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isDown = false;
var startY;

var layers = [];
var currentColor = "black";

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    currentColor = randomColor();
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isDown = false;
    layers.push({
        y1: startY,
        y2: mouseY,
        color: currentColor
    });
}

function handleMouseOut(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isDown = false;
    layers.push({
        y1: startY,
        y2: mouseY,
        color: currentColor
    });
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    drawAll();
    hLine(startY, currentColor);
    hLine(mouseY, currentColor);
}

function drawAll() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < layers.length; i++) {
        layer = layers[i];
        hLine(layer.y1, layer.color);
        hLine(layer.y2, layer.color);
    }
}

function hLine(y, color) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.strokeStyle = color;
    ctx.stroke();
}

function randomColor() {
    return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isDown=假；
var startY；
var层=[]；
var currentColor=“黑色”；
功能手柄向下（e）{
e、 预防默认值（）；
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
currentColor=randomColor（）；
isDown=真；
}
功能handleMouseUp（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
isDown=假；
推({
y1：startY，
y2：老鼠，
颜色：currentColor
});
}
函数handleMouseOut（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
isDown=假；
推({
y1：startY，
y2：老鼠，
颜色：currentColor
});
}
功能手柄移动（e）{
如果（！isDown）{
返回；
}
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
drawAll（）；
hLine（startY，currentColor）；
hLine（mouseY，currentColor）；
}
函数drawAll（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；i

---

工作小提琴是

您需要更改这行代码

currentColor=randomColor（）可在此处找到：

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    currentColor = randomColor();  //<---- Right Here//
    isDown = true;
}

功能手柄鼠标向下（e）{
e、 预防默认值（）；
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
currentColor=randomColor（）；//您可以添加颜色为选项的选择，如下所示：

<select id="cmbColor">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

<input id="txtColor" type="color">

将绘制的线的颜色为select

编辑：

使用html5，您甚至可以像这样添加和输入：

<select id="cmbColor">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

<input id="txtColor" type="color">



它会用一个颜色选择器表单提示用户！（但仅适用于html5）

只需为
选择
创建一个输入，并通过
jQuery

将
currentColor=randomColor（）；
更改为要使用的颜色
currentColor=“红色”
应该有多种颜色，只有一种。因为我可以有很多层，而且每层都应该有不同的颜色，所以在开始画线之前，你需要开发一个系统来选择颜色……使用这个，我将只有一种颜色，即红色。我应该能够创建不同的颜色层。@user3191909我知道了，我没有得到从你的帖子中。什么定义了使用的颜色？你决定了还是用户决定了？编辑Nevermind，看起来Shryme已经发布了你要找的东西。我们可以给用户一个下拉菜单，用户可以从中决定使用哪种颜色。@user3191909 Shryme有你的答案。嗯，8分钟后；）谢谢！我现在正在工作，哈哈。猜猜看我应该把精力放在实际开发上，嗯？更新你的帖子：-）谢谢你的回答。如果你想使用类型颜色，将输入放在html中，然后用：
return document.getElementById（“txtColor”）替换randomColor函数，我该如何使用它.value；
请选择一个您认为适合您需要的答案，并回答问题。
currentColor = $("#pickCol").val();