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

【问题标题】：My color selector isnt working with my canvas我的颜色选择器不适用于我的画布
【发布时间】：2014-11-24 02:49:14
【问题描述】：

我尝试为我的绘图应用程序添加颜色选择器，颜色选择器工作正常，但当我绘制时它只是显示为黑色。这是我的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);

【问题讨论】：

请阅读How does accepting an answer work?——不要编辑问题文本说它是固定的。

标签： javascript jquery html canvas

【解决方案1】：

解决方案：

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

您需要定义一个 strokeStyle 和 fillStyle 以改变绘制到画布上的颜色（见下文）。颜色输入dom元素不会自动为你改变颜色，需要通过document.getElementById('color1').value获取。

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);
    }
}

【讨论】：