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 颜色选择器】相关文章 本文来源:https://www.51html5.com/a585.html ﹝HTML5 Canvas 颜色选择器﹞相关内容
「HTML5 Canvas 颜色选择器」相关专题其它栏目也许您还喜欢 |