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