[HTML5技术]HTML5 Canvas 颜色选择器

[tr][td]这段代码是用HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图，然后添加鼠标事件“鼠标移动”，“鼠标点击”。在鼠标移动的时候，显示当前划过的颜色预览，在鼠标点击的时候，选中当前颜色，显示颜色的细节。
DEMO： http://www.oschina.net/uploads/demo/example158/
[代码] [HTML]代码

[diy=diyrighttop]0 [/diy]9[/diy]8 [/diy]7[/diy]6[/diy]5 [/diy]4 [/diy]3[/diy]2[/diy]1[/diy]0 [diy=diy2]9[diy=diy2]8[diy=diy2]7 [diy=diy2]6[diy=diy2]5[diy=diy2]4 [diy=diy2]3 [diy=diy2]2[diy=diy2]1[diy=diy2]0[/diy]9[/diy]8 [/diy]7[/diy]6[/diy]5 [/diy]4[/diy]3[/diy]2[/diy]1[/diy]0[diy=diy3]9[diy=diy3]8[diy=diy3]7 [diy=diy3]6[diy=diy3]5[diy=diy3]4 [diy=diy3]3[diy=diy3]2[diy=diy3]1[diy=diy3]0[/diy]9[/diy]8[/diy]7 [/diy]6[/diy]5[/diy]4 [/diy]3[/diy]2[/diy]1[/diy]0A>" rel="stylesheet" type="text/css" />  javascript"src="js/jquery-1.5.2.min.js">  javascript"src="js/script.js">                          Preview:     Color:  R:    G:    B:    RGB:    RGBA:    HEX:                   HTML5 canvas - Image color picker  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];  }); });

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