javascript - 使用 js.color 的自定义选择不起作用

Question

您好，我正在尝试使用 javascript 库 js.color 选择自定义颜色，但它没有选择颜色来在代码中绘制线条。它是选择颜色而不是用相同的颜色绘制线条。

    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 document.getElementById("txtColor").value;

}


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

工作 fiddle 是 http://jsfiddle.net/UfuDX/7/ .

Answer 1

它似乎在 chrome 中工作得很好。然而，Firefox 不喜欢这个颜色值。将 # 添加到开头似乎可行，这是有道理的，因为它们是十六进制值。

将您的 randcomColor() 更改为以下内容。

function randomColor() {
    return '#'+document.getElementById("txtColor").value;

}