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

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

javascript jquery html canvas

Javascript 我的颜色选择器不适用于画布,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我曾尝试为我的绘图应用程序添加一个颜色选择器，该颜色选择器工作正常，但当我绘图时，它只显示为黑色。这是我的你可以看到，如果你点击我工具栏的右边是颜色选择器，你会看到颜色选择器工作得很好，但是当你选择一种颜色时，它不会绘制为颜色，如果你找到了解决方案，请更新JSFIDLE并链接它，这样a就可以通过它进行分析我的html： <!doctype html> <html> <head> <link rel="shortcut ico

我曾尝试为我的绘图应用程序添加一个颜色选择器，该颜色选择器工作正常，但当我绘图时，它只显示为黑色。这是我的

你可以看到，如果你点击我工具栏的右边是颜色选择器，你会看到颜色选择器工作得很好，但是当你选择一种颜色时，它不会绘制为颜色，如果你找到了解决方案，请更新JSFIDLE并链接它，这样a就可以通过它进行分析

我的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>

我的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);

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var半径=10；
var=false；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
context.lineWidth=半径*2；
var putPoint=函数（e）{
如果（拖动）{
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）
stroke（）；
context.beginPath（）；
弧（mouseX，mouseY，radius，0，Math.PI*2）；
context.fill（）；
context.beginPath（）；
moveTo（mouseX，mouseY）；
}
}
var啮合=功能（e）{
拖动=真；
putPoint（e）；
}
变量=函数（）{
拖动=假；
context.beginPath（）；
}
canvas.addEventListener（'mousedown'，engage）；
canvas.addEventListener（'mousemove'，putPoint）；
canvas.addEventListener（'mouseup'，disconnect）；
var setRadius=函数（newRadius）{
如果（newRadiusmaxRad）newRadius=maxRad；
半径=新半径；
context.lineWidth=半径*2；
radSpan.innerHTML=半径；
}
var minRad=1，
maxRad=100，
defaultRad=20，
间隔=5，
radSpan=document.getElementById（'radval'），
decRad=document.getElementById（'decRad'），
incRad=document.getElementById（'incRad'）；
decRad.addEventListener（'click'，函数（）{
设置半径（半径-间隔）；
});
incRad.addEventListener（'click'，函数（）{
设置半径（半径+间隔）；
});
设置半径（默认rad）；

解决方案小提琴：

您需要定义笔划样式和填充样式，以便更改绘制到画布的颜色（请参见下文）。颜色输入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); } }
请阅读-不要编辑问题文本说它是固定的。
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); } }