HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML5 Canvas 颜色选择器

HTML5 Canvas 颜色选择器

这段代码是用HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图,然后添加鼠标事件 “鼠标移动”,“鼠标点击”。在鼠标移动的时候,显示当前划过的颜色预览,在鼠标点击的时候,选中当前颜色,显示颜色的细节。

DEMO: http://www.oschina.net/uploads/demo/example158/ 

[代码] [HTML]代码

<!DOCTYPE html> <html lang="en" >     <head>         <meta charset="utf-8" />         <title><A title=HTML5 href="http://www.xyhtml5.com/">HTML5</A> canvas - Image color picker | Script Tutorials</title>         <link href="<A title=css href="http://www.xyhtml5.com/css3">css</A>/main.<A title=css href="http://www.xyhtml5.com/css3">css</A>" rel="stylesheet" type="text/css" />         <script type="text/<A title=javascript href="http://www.xyhtml5.com/javascript">javascript</A>" src="js/jquery-1.5.2.min.js"></script>         <script type="text/<A title=javascript href="http://www.xyhtml5.com/javascript">javascript</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">                 <div><input type="button" value="Next image" id="swImage" /></div>                 <div>Preview:</div>                 <div id="preview"></div>                 <div>Color:</div>                 <div>R: <input type="text" id="rVal" /></div>                 <div>G: <input type="text" id="gVal" /></div>                 <div>B: <input type="text" id="bVal" /></div>                 <div>RGB: <input type="text" id="rgbVal" /></div>                 <div>RGBA: <input type="text" id="rgbaVal" /></div>                 <div>HEX: <input type="text" id="hexVal" /></div>                 <hr />             </div>             <div style="clear:both;"></div>         </div>         <footer>             <h2>HTML5 canvas - Image color picker</h2>             <a href="http://www.script-tutorials.com/html5-canvas-image-color-picker/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>         </footer>     </body> </html>

【HTML5 Canvas 颜色选择器】相关文章

1. HTML5 Canvas 颜色选择器

2. 使用HTML5技术开发的超酷颜色选择器

3. 使用HTML5技术开发的超酷颜色选择器

4. jQuery的颜色选择器插件jPicker

5. CSS3每日一练之选择器-结构性伪类选择器[三]

6. CSS3每日一练之选择器-结构性伪类选择器[二]

7. CSS3每日一练之选择器-兄弟元素选择器

8. CSS3每日一练之选择器-结构性伪类选择器[一]

9. CSS3每日一练之选择器-状态伪类选择器[五]

10. CSS3每日一练之选择器-属性选择器

本文来源:https://www.51html5.com/a585.html

点击展开全部

﹝HTML5 Canvas 颜色选择器﹞相关内容

「HTML5 Canvas 颜色选择器」相关专题