HTML5 Canvas 颜色选择器

HTML5 Canvas 颜色选择器

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

DEMO：https://www.360docs.net/doc/0f16958209.html,/uploads/demo/example158/

[代码] [HTML]代码

css/main.

href="https://www.360docs.net/doc/0f16958209.html,/css3">css" rel="stylesheet" type="text/css" />

Preview:

Color:

R:

G:

B:

RGB:

RGBA:

HEX:

---

HTML5 canvas - Image color picker

href="https://www.360docs.net/doc/0f16958209.html,/html5-canvas-image-color-picker/" class="stuts">Back to original tutorial on Script Tutorials

[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];

});

});