您好,我想在我的元素中使用自定义颜色,而不是使用随机颜色,因为其中一些颜色在我的背景中不可见。我的背景不是白色,所以我怎样才能做到这一点。
我想创建一个下拉菜单,我可以从中选择颜色和绘制图层,或者可以在 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);
});
工作 fiddle 是 http://jsfiddle.net/UfuDX/1/
最佳答案
您可以像这样添加一个带有颜色的选项:
<select id="cmbColor">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
然后,在您的随机颜色函数中,改为返回它(并更改函数的名称)
function randomColor() {
return document.getElementById("cmbColor").value;
}
将要绘制的线条的颜色为所选颜色!
编辑:
使用html5,你甚至可以这样添加和输入:
<input id="txtColor" type="color">
它会提示用户一个颜色选择器表单! (虽然只适用于 html5)
关于javascript - 如何使用自定义颜色而不是预定义颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21101735/