Question

描述：我的页面中有一个画布，这是编码。我想让用户选择颜色和绘画。我已经有了颜色选择。

问题：无法使用所选颜色进行绘制。我没能做到这个功能。请帮忙。

P.S。通过单击按钮，将弹出画布。

<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

无法使用所选颜色绘制

1 个答案: