原创力文档- 1、本文档共6页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
HTML5Cqnvqs颜色选择器
HTML5 Canvas 颜色选择器
这段代码是用HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图，然后添加鼠标事件 “鼠标移动”，“鼠标点击”。在鼠标移动的时候，显示当前划过的颜色预览，在鼠标点击的时候，选中当前颜色，显示颜色的细节。
DEMO： /uploads/demo/example158/
[代码] [HTML]代码
!DOCTYPE html
html lang=en
head
meta charset=utf-8 /
titleA title=HTML5 href=/HTML5/A canvas - Image color picker | Script Tutorials/title
link href=A title=css href=/css3css/A/main.A title=css href=/css3css/A rel=stylesheet type=text/css /
script type=text/A title=javascript href=/javascriptjavascript/A src=js/jquery-1.5.2.min.js/script
script type=text/A title=javascript href=/javascriptjavascript/A src=js/script.js/script
/head
body
div class=container
div class=column1
canvas id=panel width=500 height=333/canvas
/div
div class=column2
divinput type=button value=Next image id=swImage //div
divPreview:/div
div id=preview/div
divColor:/div
divR: input type=text id=rVal //div
divG: input type=text id=gVal //div
divB: input type=text id=bVal //div
divRGB: input type=text id=rgbVal //div
divRGBA: input type=text id=rgbaVal //div
divHEX: input type=text id=hexVal //div
hr /
/div
div style=clear:both;/div
/div
footer
h2HTML5 canvas - Image color picker/h2
a href=/html5-canvas-image-color-picker/ class=stutsBack to original tutorial on spanScript Tutorials/span/a
/footer
/body
/html
[CSS]代码
*{
margin:0;
padding:0;
}
body {
background-color:#bababa;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:
文档评论（0）