使用HTML5技术开发的超酷颜色选择器

使用HTML5技术来自己实现一个更棒的颜色选择器。希望大家喜欢！

HTML代码

1. <!-- preview element -->
   
2. <div class="preview"></div>
   
3. 
   
4. <!-- colorpicker element -->
   
5. <div class="colorpicker" style="display:none">
   
6.     <canvas id="picker" var="1" width="300" height="300"></canvas>
   
7. 
   
8.     <div class="controls">
   
9.         <div><label>R</label> <input type="text" id="rVal" /></div>
   
10.         <div><label>G</label> <input type="text" id="gVal" /></div>
    
11.         <div><label>B</label> <input type="text" id="bVal" /></div>
    
12.         <div><label>RGB</label> <input type="text" id="rgbVal" /></div>
    
13.         <div><label>HEX</label> <input type="text" id="hexVal" /></div>
    
14.     </div>
    
15. </div>

复制代码
代码很简单，包含了2个部分，一个点击元素，一个用来展示颜色选择器的元素。

Javascript代码

1. $(function(){
   
2.     var bCanPreview = true; // can preview
   
3. 
   
4.     // create canvas and context objects
   
5.     var canvas = document.getElementById('picker');
   
6.     var ctx = canvas.getContext('2d');
   
7. 
   
8.     // drawing active image
   
9.     var image = new Image();
   
10.     image.onload = function () {
    
11.         ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
    
12.     }
    
13. 
    
14.     // select desired colorwheel
    
15.     var imagesrc="images/colorwheel1.png";
    
16.     switch ($(canvas).attr('var')) {
    
17.         case '2':
    
18.             imagesrc="images/colorwheel2.png";
    
19.             break;
    
20.         case '3':
    
21.             imagesrc="images/colorwheel3.png";
    
22.             break;
    
23.         case '4':
    
24.             imagesrc="images/colorwheel4.png";
    
25.             break;
    
26.         case '5':
    
27.             imagesrc="images/colorwheel5.png";
    
28.             break;
    
29.     }
    
30.     image.src = imageSrc;
    
31. 
    
32.     $('#picker').mousemove(function(e) { // mouse move handler
    
33.         if (bCanPreview) {
    
34.             // get coordinates of current position
    
35.             var canvasOffset = $(canvas).offset();
    
36.             var canvasX = Math.floor(e.pageX - canvasOffset.left);
    
37.             var canvasY = Math.floor(e.pageY - canvasOffset.top);
    
38. 
    
39.             // get current pixel
    
40.             var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
    
41.             var pixel = imageData.data;
    
42. 
    
43.             // update preview color
    
44.             var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
    
45.             $('.preview').css('backgroundColor', pixelColor);
    
46. 
    
47.             // update controls
    
48.             $('#rVal').val(pixel[0]);
    
49.             $('#gVal').val(pixel[1]);
    
50.             $('#bVal').val(pixel[2]);
    
51.             $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);
    
52. 
    
53.             var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
    
54.             $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
    
55.         }
    
56.     });
    
57.     $('#picker').click(function(e) { // click event handler
    
58.         bCanPreview = !bCanPreview;
    
59.     });
    
60.     $('.preview').click(function(e) { // preview click
    
61.         $('.colorpicker').fadeToggle("slow", "linear");
    
62.         bCanPreview = true;
    
63.     });
    
64. });

复制代码
大家可以看到，这是一个非常短的js代码，用来创建新的画布和对象，然后我们画出一个圆形的颜色板。你可以选择不同颜色底板。 这里使用一个参数来设定不同的选择。如下：

1. <canvas id="picker" var="1" width="300" height="300"></canvas>

复制代码

1. <canvas id="picker" var="2" width="300" height="300"></canvas>

复制代码

1. <canvas id="picker" var="3" width="300" height="300"></canvas>

复制代码

1. <canvas id="picker" var="4" width="300" height="300"></canvas>

复制代码

1. <canvas id="picker" var="5" width="300" height="300"></canvas>

复制代码
下面我们添加事件：mousemove，click事件。这里使用jQuery来实现选择器的展现和隐藏。

1. $('.preview').click(function(e) { // preview click     $('.colorpicker').fadeToggle("slow", "linear");     bCanPreview = true; });

复制代码
当我们的鼠标移动到选择对象上，我们需要刷新信息，例如，目前颜色

1. $('#picker').mousemove(function(e) { // mouse move handler
   
2.     if (bCanPreview) {
   
3.         // get coordinates of current position
   
4.         var canvasOffset = $(canvas).offset();
   
5.         var canvasX = Math.floor(e.pageX - canvasOffset.left);
   
6.         var canvasY = Math.floor(e.pageY - canvasOffset.top);
   
7. 
   
8.         // get current pixel
   
9.         var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
   
10.         var pixel = imageData.data;
    
11. 
    
12.         // update preview color
    
13.         var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
    
14.         $('.preview').css('backgroundColor', pixelColor);
    
15. 
    
16.         // update controls
    
17.         $('#rVal').val(pixel[0]);
    
18.         $('#gVal').val(pixel[1]);
    
19.         $('#bVal').val(pixel[2]);
    
20.         $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);
    
21. 
    
22.         var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
    
23.         $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
    
24.     }
    
25. });
    
26. $('#picker').click(function(e) { // click event handler
    
27.     bCanPreview = !bCanPreview;
    
28. });

复制代码
CSS代码

不同颜色底板的CSS：

1. /* colorpicker styles */
   
2. .colorpicker {
   
3.     background-color: #222222;
   
4.     border-radius: 5px 5px 5px 5px;
   
5.     box-shadow: 2px 2px 2px #444444;
   
6.     color: #FFFFFF;
   
7.     font-size: 12px;
   
8.     position: absolute;
   
9.     width: 460px;
   
10. }
    
11. #picker {
    
12.     cursor: crosshair;
    
13.     float: left;
    
14.     margin: 10px;
    
15.     border: 0;
    
16. }
    
17. .controls {
    
18.     float: right;
    
19.     margin: 10px;
    
20. }
    
21. .controls > div {
    
22.     border: 1px solid #2F2F2F;
    
23.     margin-bottom: 5px;
    
24.     overflow: hidden;
    
25.     padding: 5px;
    
26. }
    
27. .controls label {
    
28.     float: left;
    
29. }
    
30. .controls > div input {
    
31.     background-color: #121212;
    
32.     border: 1px solid #2F2F2F;
    
33.     color: #DDDDDD;
    
34.     float: right;
    
35.     font-size: 10px;
    
36.     height: 14px;
    
37.     margin-left: 6px;
    
38.     text-align: center;
    
39.     text-transform: uppercase;
    
40.     width: 75px;
    
41. }
    
42. .preview {
    
43.     background: url("../images/select.png") repeat scroll center center transparent;
    
44.     border-radius: 3px;
    
45.     box-shadow: 2px 2px 2px #444444;
    
46.     cursor: pointer;
    
47.     height: 30px;
    
48.     width: 30px;
    
49. }

复制代码
演示：http://www.gbin1.com/technology/democenter/20121023-html-color-picker/index.html

下载：





英文原文：http://www.script-tutorials.com/html5-color-picker-canvas/

【使用HTML5技术开发的超酷颜色选择器】相关文章

1. 使用HTML5技术开发的超酷颜色选择器

2. 使用HTML5技术开发的超酷颜色选择器

3. HTML5 Canvas 颜色选择器

4. jQuery的颜色选择器插件jPicker

5. PhoneGap开发初体验：用HTML5技术开发本地应用

6. CSS3每日一练之选择器-结构性伪类选择器[三]

7. CSS3每日一练之选择器-结构性伪类选择器[二]

8. CSS3每日一练之选择器-兄弟元素选择器

9. CSS3每日一练之选择器-结构性伪类选择器[一]

10. CSS3每日一练之选择器-状态伪类选择器[五]

本文来源：https://www.51html5.com/a670.html