HTML5 Canvas 颜色选择器

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

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

[代码] [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 = " 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/ http://www.xyhtml5.com/javascript ">javascript A >" src="js/jquery-1.5.2.min.js"> script > script type = "text/ 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 >

[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 h 2 { font-size : 22px ; font-weight : normal ; left : 50% ; margin-left : -400px ; padding : 22px 0 ; position : absolute ; width : 540px ; } footer a.stuts,a.stuts:visited{ border : none ; text-decoration : none ; color : #fcfcfc ; font-size : 14px ; left : 50% ; line-height : 31px ; margin : 23px 0 0 110px ; position : absolute ; top : 0 ; } footer .stuts span { font-size : 22px ; font-weight : bold ; margin-left : 5px ; } .container { color : #000 ; margin : 20px auto ; position : relative ; width : 730px ; } .column 1 { float : left ; width : 500px ; } .column 2 { float : left ; padding-left : 20px ; width : 170px ; } #panel { border : 1px #000 solid ; box-shadow: 4px 6px 6px #444444 ; cursor : crosshair ; } .column 2 > div { margin-bottom : 10px ; } #swImage { border : 1px #000 solid ; box-shadow: 2px 3px 3px #444444 ; cursor : pointer ; height : 25px ; line-height : 25px ; border-radius: 3px ; -moz-border-radius: 3px ; -webkit-border-radius: 3px ; } #swImage:hover { margin-left : 2px ; } #preview { border : 1px #000 solid ; box-shadow: 2px 3px 3px #444444 ; height : 80px ; width : 80px ; border-radius: 3px ; -moz-border-radius: 3px ; -webkit-border-radius: 3px ; } .column 2 input[type=text] { float : right ; width : 110px ; } [JavaScript]代码 var canvas; var ctx; var images = [ // predefined array of used images 'images/pic1.jpg' , 'images/pic2.jpg' , 'images/pic3.jpg' , 'images/pic4.jpg' , 'images/pic5.jpg' , 'images/pic6.jpg' , 'images/pic7.jpg' , 'images/pic8.jpg' , 'images/pic9.jpg' , 'images/pic10.jpg' ]; var iActiveImage = 0; $( function (){ // drawing active image var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas } image.src = images[iActiveImage]; // creating canvas object canvas = document.getElementById( 'panel' ); ctx = canvas.getContext( '2d' ); $( '#panel' ).mousemove( function (e) { // mouse move handler var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; var pixelColor = "rgba(" +pixel[0]+ ", " +pixel[1]+ ", " +pixel[2]+ ", " +pixel[3]+ ")" ; $( '#preview' ).css( 'backgroundColor' , pixelColor); }); $( '#panel' ).click( function (e) { // mouse click handler var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; $( '#rVal' ).val(pixel[0]); $( '#gVal' ).val(pixel[1]); $( '#bVal' ).val(pixel[2]); $( '#rgbVal' ).val(pixel[0]+ ',' +pixel[1]+ ',' +pixel[2]); $( '#rgbaVal' ).val(pixel[0]+ ',' +pixel[1]+ ',' +pixel[2]+ ',' +pixel[3]); var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; $( '#hexVal' ).val( '#' + dColor.toString(16) ); }); $( '#swImage' ).click( function (e) { // switching images iActiveImage++; if (iActiveImage >= 10) iActiveImage = 0; image.src = images[iActiveImage]; }); });

本文由 HTM5L中国 网站小编整理转发，转载请注明出处。

HTML5 Canvas 颜色选择器

Related articles