自定义选择使用js.color无法正常工作
嗨，我正在尝试使用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); }); 工作小提琴是http://jsfiddle.net/UfuDX/7/ 。
它似乎在chrome中工作就好了。 然而，Firefox不喜欢颜色值。 将#添加到开头似乎有效，这是有道理的，因为它们是hex值。
将您的randcomColor()更改为以下内容。
function randomColor() { return '#'+document.getElementById("txtColor").value; }