用户选择的颜色为"绘图颜色"

时间:2017-11-03 09:52:08

标签: javascript

使用我在这里的网络应用程序,用户需要手动选择颜色。我有可用的颜色限制。我想要一个颜色选择器,用户可以使用它来选择绘图颜色。但是我不能让它发挥作用。

My webapp so far...



/**
 *  Created somewhere on the Bahama's.
 *    __̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.___
 *  By Samir.
 */
#container {
    position: relative;
}

#imageView {
    border: 1px solid #000;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

div#canvasDiv {
    cursor: crosshair;
}

div {
    cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
    <title>Paint</title>
    <link rel="stylesheet" href="style/style.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script type="text/javascript" src="paint.js"></script>
    <script type="text/javascript" src="init.js"></script>
</head>
<body>
<div id="container" style="padding:5px 0px 0px 0px;">
    <div id="colorToolbar" style="border: 1px solid black; float: left;">
        <div id="red" style="background: red; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="pink" style="background:pink; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="fuchsia" style="background:fuchsia; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="orange" style="background:orange; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="yellow" style="background:yellow; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="lime" style="background:lime; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="green" style="background:green; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="blue" style="background:blue; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="purple" style="background:purple; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <div id="black" style="background:black; width:50px; height:50px; float:left; border: 1px dashed white;"></div>
        <div style="clear: both;"></div>
        <div id="white" style="background:white; width:50px; height:50px; float:left;"></div>
        <div style="clear: both;"></div>
        <hr/>
        <div id="fill" style="width:50px; height:50px; float:left;"><img src="img/fill.png" width="50" height="50"/>
        </div>
        <div style="clear: both;"></div>
        <div id="cat" style="width:50px; height:50px; float:left;"><img id="catImg" src="img/cat.png" width="50"
                                                                        height="50"/></div>
        <div style="clear: both;"></div>
        <div id="dog" style="width:50px; height:50px; float:left;"><img id="dogImg" src="img/dog.png" width="50"
                                                                        height="50"/></div>
        <div style="clear: both;"></div>
        <div id="dragonfly" style="width:50px; height:50px; float:left;"><img id="dragonFlyImg" src="img/fly.png"
                                                                              width="50" height="50"/></div>
        <div style="clear: both;"></div>
        <div id="ladybug" style="width:50px; height:50px; float:left;"><img id="ladyBugImg" src="img/bug.png" width="50"
                                                                            height="50"/></div>
        <div style="clear: both;"></div>
        <div id="heart" style="width:50px; height:50px; float:left;"><img id="heartImg" src="img/heart.png" width="50"
                                                                          height="50"/></div>
        <div style="clear: both;"></div>
        <div id="save" style="width:50px; height:50px; float:left;"><a id="download" download="image.png">Save</a></div>
        <div style="clear: both;"></div>
    </div>

    <div id="canvasDiv" style="float: left;">
        <canvas id="imageView">
            <p>Unfortunately, your browser is currently unsupported by our web
                application. We are sorry for the inconvenience. Please use one of the
                supported browsers listed below, or draw the image you want using an
                offline tool.</p>
            <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
                    href="http://www.mozilla.com">Firefox</a>, <a
                    href="http://www.apple.com/safari">Safari</a>, and <a
                    href="http://www.konqueror.org">Konqueror</a>.</p>
        </canvas>
    </div>
    <div id="stats" style="font-size:8pt; padding-left: 50px; float: left;">0 0</div>
    <div id="size" style="font-size:8pt; padding-left: 500px; float: left;">0 0</div>
</div>
</body>
</html>
&#13;
usersService
&#13;
&#13;
&#13;

有人可以在我的代码中插入一个工作的颜色选择器吗? 像这样:enter image description here

0 个答案:

没有答案