我的顏色選擇器未與我的畫布工作

-1

我試圖添加一個顏色選擇器爲我的繪圖應用程序，顏色選擇器工作鰭，但是當我畫它只是出現在黑色。這裏是我的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);

來源

2014-11-23 Daniel Adams

請參閱[如何接受答案的工作？]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work） - 不要編輯問題文字說它是固定的。 – Quentin 2014-11-23 18:49:35

解決方案小提琴：

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

來源

2014-11-23 18:00:13

我的顏色選擇器未與我的畫布工作

回答

相關問題