javascript - 通过单击对象而不是下拉菜单更改颜色

Question

我遵循了“在 5 分钟内创建 HTML5 画布画板！” 几天前的教程，现在我想通过单击有色对象来更改颜色。

http://bit.ly/18Gxu9h

如何摆脱<ul>选择，并通过单击它们来选择颜色？

提前致谢！

Answer 1

你有重复的 ID，你不能有，它是无效的 HTML。

我的建议：

HTML

<div id="container">
    <div id="board">
        <canvas id="myCanvas" width="1024px" height="500px"></canvas>
        <p>Kies een kleur:
            <select id="selectColorSel">
                <option data-id="colBlack" value="#000000" selected="selected">Zwart</option>
                <option data-id="colRed" value="#be1e28">Rood</option>
                <option data-id="colBlue" value="#479abd">Blauw</option>
                <option data-id="colGreen" value="#3bab4b">Groen</option>
                <option data-id="colOrange" value="#f3601b">Oranje</option>
                <option data-id="colYellow" value="#f6c910">Geel</option>
            </select>
        </p>
    </div>
    <!-- END board -->
    <div id="selectColorDiv">
        <div id="colBlue"></div>
        <div id="colRed"></div>
        <div id="colYellow"></div>
        <div id="colGreen"></div>
        <div id="colBlack"></div>
        <div id="colRed"></div>
        <div id="colYellow"></div>
        <div id="colGreen"></div>
    </div>
</div>

jQuery

window.onload = function () {
    var myCanvas = document.getElementById("myCanvas");
    var curColor = $('#selectColorSel option:selected').val();
    if (myCanvas) {
        var isDown = false;
        var ctx = myCanvas.getContext("2d");
        var canvasX, canvasY;
        ctx.lineWidth = 5;
        $(myCanvas)
            .mousedown(function (e) {
            isDown = true;
            ctx.beginPath();
            canvasX = e.pageX - myCanvas.offsetLeft;
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.moveTo(canvasX, canvasY);
        })
            .mousemove(function (e) {
            if (isDown != false) {
                canvasX = e.pageX - myCanvas.offsetLeft;
                canvasY = e.pageY - myCanvas.offsetTop;
                ctx.lineTo(canvasX, canvasY);
                ctx.strokeStyle = curColor;
                ctx.stroke();
            }
        })
            .mouseup(function (e) {
            isDown = false;
            ctx.closePath();
        });
    }
    $('#selectColorSel').change(function () {
        curColor = $('#selectColorSel option:selected').val();
    });
    $('#selectColorDiv div').click(function () {
        var sel = $('[data-id="' + this.id + '"]').val();
        $('#selectColorSel').val(sel);
         curColor = $('#selectColorSel option:selected').val();
    });
};

演示在这里

Answer 2

http://jsfiddle.net/Tnm4t/

<script type="text/javascript">
    function myFunction(){
       var color = document.getElementById('selectColor').value;

        document.getElementById('colBlack').style.display = "none";    
        document.getElementById('colBlue').style.display = "none";    
        document.getElementById('colRed').style.display = "none";    
        document.getElementById('colGreen').style.display = "none";    
        document.getElementById('colOrange').style.display = "none";    
        document.getElementById('colYellow').style.display = "none";

        document.getElementById(color).style.display = "block";

    }
</script>

<p>Kies een kleur:<select id="selectColor" onchange="myFunction()">
                      <option value="colBlack" selected="selected">Zwart</option>
                      <option value="colRed">Rood</option>
                      <option value="colBlue">Blauw</option>
                      <option value="colGreen">Groen</option>
                      <option value="colOrange">Oranje</option>
                      <option value="colYellow">Geel</option>
                      </select>
    </p>
<div id="selectedColor">
        <div id="colBlue"></div>
        <div id="colRed"></div>
        <div id="colYellow"></div>
        <div id="colOrange"></div>
        <div id="colGreen"></div>       
        <div id="colBlack"></div>           
    </div>

CSS

#selectedColor div{
    display:none;
}
#colBlack {background-color:#000; height:100px; width:128px; float:left;}
#colRed {background-color:#be1e28; height:100px; width:128px; float:left;}
#colBlue {background-color:#479abd; height:100px; width:128px; float:left;}
#colYellow {background-color:#f6c910; height:100px; width:128px; float:left;}
#colGreen {background-color:#3bab4b; height:100px; width:128px; float:left;}
#colOrange {background-color:#ffa500; height:100px; width:128px; float:left;}

误读 OP 问题，编辑小提琴。