自定義選擇使用js.color不工作

您好我試圖選擇一個自定義顏色使用JavaScript庫js.color，但它沒有拿起顏色來繪製代碼中的行。它正在選擇顏色，但沒有繪製相同的線條。自定義選擇使用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); 
});

工作小提琴是http://jsfiddle.net/UfuDX/7/。

來源

2014-01-16 PSDebugger

我沒有看到任何地方你從'select'得到的值。 'randomColor（）'也只是獲取不變的文本框的值。 – Jack

@傑克我不再使用選擇了。我想選擇從拾色器中拾取的顏色並根據該顏色繪製線條。顏色選擇器的值隨着您從中選擇不同的顏色而發生變化。 – PSDebugger

使用colorbox適合我。你使用的是什麼瀏覽器？任何控制檯錯誤？ – Jack

它似乎在鉻工作得很好。 Firefox然而不喜歡顏色值。將#添加到開頭似乎工作，這是有道理的，因爲它們是十六進制值。

將您的randcomColor()更改爲下方。

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

}

來源

2014-01-16 23:07:58 Jack

自定義選擇使用js.color不工作

回答

相關問題