Question

我试图为我的绘图应用添加一个颜色选择器，颜色选择器工作鳍但是当我绘制时它只是以黑色显示。这是我的JSFIDDLE

你可以看到你点击我的工具栏的右侧是颜色选择器，你会发现颜色选择器工作得很好但是当你选择一种颜色它不会作为颜色绘制，如果你找到一个解决方案请更新JSFiddle并链接它，以便可以通过它进行分析。

我的HTML：

<!doctype html>
<html>

    <head>
        <link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
        <title>Canvas</title>
        <link rel="stylesheet" href="master.css">
        <script type="text/javascript">
            function processData(c1, c2) {
                var cv1 = document.getElementById(c1).value;
                var cv2 = document.getElementById(c2).value;
                alert(cv1 + "\n" + cv2);
            }
        </script>
    </head>
<span style="cursor:crosshair">
<body style='margin: 0'>
    <div id="toolbar">
        <div id="rad">
            Radius <span id="radval">10</span>

    <div id="decrad" class="radcontrol">-</div>
    <div id="incrad" class="radcontrol">+</div> <a href="../Be Creative.html"><font color="white">BACK</font></a>
    <a href="Canvas.html"><font color="white">CLEAR</font></a>

    </div>
    <div id="colors">
        Colour:
            <input type="color" name="color1" id="color1" />
            <br />
            <br />
    </div>
    <canvas id="canvas" style="display: block;">sorry, your browser does not support our canvas tag.</canvas>
    <script src="main.js"></script>
    <script src="toolbar.js"></script>
    <script src="pallet.js"></script>
    </span>
    <br>
    </body>

</html>

我的css：

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: sans-serif;
    user-select: none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
}
#toolbar {
    width: 100%;
    height: 50px;
    padding: 10px;
    position: fixed;
    top: 0;
    background-color: #2f2f2f;
    color: white;
}
.radcontrol {
    width: 30px;
    height: 30px;
    background-color: #4f4f4f;
    display: inline-block;
    text-align: center;
    padding: 5px;
}
#rad {
    float: left;
}
#colors {
    float: right;
}
.swatch {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
    display: inline-block;
    margin-left: 10px;
}
.swatch.active {
    border: 2px solid white;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#back {
    width: 60px;
    height: 5px;
    padding: 5%;
    background-color: white;
}

我的javascript：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var dragging = false;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

var putPoint = function (e) {
    if (dragging) {
        var bounds = canvas.getBoundingClientRect();
        var mouseX = e.clientX + bounds.left;
        var mouseY = e.clientY - bounds.top;
        var mouseX = e.clientX + bounds.left - 20;
        context.lineTo(mouseX, mouseY)
        context.stroke();
        context.beginPath();
        context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
        context.fill();
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    }
}

var engage = function (e) {
    dragging = true;
    putPoint(e);
}

var disengage = function () {
    dragging = false;
    context.beginPath();
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);

var setRadius = function (newRadius) {
    if (newRadius < minRad) newRadius = minRad;
    else if (newRadius > maxRad) newRadius = maxRad;
    radius = newRadius;
    context.lineWidth = radius * 2;

    radSpan.innerHTML = radius;
}

var minRad = 1,
    maxRad = 100,
    defaultRad = 20,
    interval = 5,
    radSpan = document.getElementById('radval'),
    decRad = document.getElementById('decrad'),
    incRad = document.getElementById('incrad');

decRad.addEventListener('click', function () {
    setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
    setRadius(radius + interval);
});

setRadius(defaultRad);

Answer 1

解决方案小提琴：

http://jsfiddle.net/CJ_/egpr99k9/22/

您需要定义strokeStyle和fillStyle以更改绘制到画布的颜色（请参见下文）。颜色输入dom元素不会自动更改颜色，您需要通过 document.getElementById（'color1'）。值来获取颜色。

var putPoint = function (e) {
    if (dragging) {
      var bounds = canvas.getBoundingClientRect();
      var mouseX = e.clientX + bounds.left;
      var mouseY = e.clientY - bounds.top;
      var mouseX = e.clientX + bounds.left - 20;
      context.lineTo(mouseX, mouseY)
      context.strokeStyle = document.getElementById('color1').value;
      context.stroke();
      context.beginPath();
      context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
      context.fillStyle = document.getElementById('color1').value;
      context.fill();
      context.beginPath();
      context.moveTo(mouseX, mouseY);
    }
}

我的颜色选择器不适用于我的画布

1 个答案: