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/">HTML5A> canvas - Image color picker | Script Tutorialstitle>

link href="http://www.xyhtml5.com/css3">cssA>/main.A title=css href="http://www.xyhtml5.com/css3">cssA>" rel="stylesheet" type="text/css" />

script type="text/http://www.xyhtml5.com/javascript">javascriptA>" src="js/jquery-1.5.2.min.js">script>

script type="text/http://www.xyhtml5.com/javascript">javascriptA>" 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 pickerh2>

a href="http://www.script-tutorials.com/html5-canvas-image-color-picker/" class="stuts">Back to original tutorial on span>Script Tutorialsspan>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: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;

}

.column1 {

float:left;

width:500px;

}

.column2 {

float:left;

padding-left:20px;

width:170px;

}

#panel {

border:1px #000 solid;

box-shadow:4px 6px 6px #444444;

cursor:crosshair;

}

.column2 > 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;

}

.column2 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中国网站小编整理转发，转载请注明出处。