無法使用選定的顏色繪製

Question

描述：我的頁面上有一個畫布繪圖，下面是編碼。我想讓用戶選擇顏色並繪製。我已經有了顏色選擇。

問題：無法使用選定的顏色進行繪製。我沒有做到這個功能。請幫忙。

p.s.通過點擊按鈕，畫布會彈出。

演示：jsfiddle

<button onClick="openPopup();">click here</button> 
    <div id="test" class="popup"> 
    <div></div> 
     <div class="cancel" onclick="closePopup();"></div> 
     <canvas id="canvas1" width="750" height="720" style="border: 1px solid black"> 
     </canvas> 
     <p>&nbsp;</p> 
    <p> 

     <input type="button" id="Orange" style="background-color: orange; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="Yellow" style="background-color: yellow; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="Green" style="background-color: green; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="Blue" style="background-color: blue; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="Purple" style="background-color: purple; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="Brown" style="background-color: brown; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="Black" style="background-color: black; width: 25px; 
    height: 25px;"/> 
    <input type="button" id="White" style="background-color: white; width: 25px; 
    height: 25px;"/> 
    </p> 
    <p><input type="button" id="reset_image" value="Reset Drawing"/></p> 
    </div> 

    <style> 
    #canvas1 { 
     left:0; /* adjust as needed */ 
     top:0; 
    } 

    .popup{ 
     position:absolute; 
     top:0px; 
     left:0px; 
     margin:0px; 
     width: 900px; 
     height: 750px; 
     font-family:verdana; 
     font-size:13px; 
     background-color:white; 
     border:2px solid grey; 
     z-index:100000000000000000; 
     display:none; 
     opacity:0.6; 
     filter:alpha(opacity=60); 
     margin-left: 300px; 
     margin-top: 90px; 
     overflow: auto; 
     } 

    .cancel{ 
     display:relative; 
     cursor:pointer; 
     margin:0; 
     float:right; 
     height:10px; 
     width:14px; 
     padding:0 0 5px 0; 
     background-color:red; 
     text-align:center; 
     font-weight:bold; 
     font-size:11px; 
     color:white; 
     border-radius:3px; 
     z-index:100000000000000000; 
     } 

    .cancel:hover{ 
     background:rgb(255,50,50); 
     } 

    </style> 
    <script> 
    function openPopup() { 
     var p = document.getElementById('test'); 
     p.style.display = 'block'; 

     canvas.width = parseInt(p.style.width, '10'); //only when you use pixels 
     canvas.height = parseInt(p.style.height, '10'); 
    } 
    function closePopup() { 
     document.getElementById('test').style.display = 'none'; 
    } 

    var can = document.getElementById('canvas1'); 
    var ctx = can.getContext('2d'); 

    var isPressed = false; 
    var mx = 4, my = 4; 

    function move(e) { 
     getMouse(e); 
     if (isPressed) { 
     ctx.lineTo(mx, my); 
     ctx.stroke() 
     } 
    } 

    function up(e) { 
     getMouse(e); 
     isPressed = false; 
    } 

    function down(e) { 
     getMouse(e); 
     ctx.beginPath(); 
     ctx.moveTo(mx, my); 
     isPressed = true; 
    } 

    can.onmousemove = move; 
    can.onmousedown = down; 
    can.onmouseup = up; 

    // way oversimplified: 
    function getMouse(e) { 
     var element = can, offsetX = 0, offsetY = 0; 
     mx = e.pageX - 305; 
     my = e.pageY - 95; 

    } 
    </script> 

Answer 1

就在這個功能添加到按鈕的每一個onclick事件： -

function choosecolor(cps) { 
ctx.strokeStyle = cps; // choosen color 
} 

onclick事件添加到這樣的每一個按鈕： -

<input type="button" onclick="choosecolor('yellow color code')" id="Yellow" style="background-color: yellow; width: 25px; 
height: 25px;"/> 

看到這個工作小提琴： - Fiddle