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

来源:网络整理  作者:GBin1  浏览:
相关专题: HTML5教程
导读: 使用HTML5技术来自己实现一个更棒的颜色选择器。希望大家喜欢! HTML代码 <!-- preview element --> <div class="preview"></div> <!-- colorpicker element --> ...
使用HTML5技术来自己实现一个更棒的颜色选择器。希望大家喜欢!

HTML代码

  1. <!-- preview element -->
  2. <div class="preview"></div>

  3. <!-- colorpicker element -->
  4. <div class="colorpicker" style="display:none">
  5.     <canvas id="picker" var="1" width="300" height="300"></canvas>

  6.     <div class="controls">
  7.         <div><label>R</label> <input type="text" id="rVal" /></div>
  8.         <div><label>G</label> <input type="text" id="gVal" /></div>
  9.         <div><label>B</label> <input type="text" id="bVal" /></div>
  10.         <div><label>RGB</label> <input type="text" id="rgbVal" /></div>
  11.         <div><label>HEX</label> <input type="text" id="hexVal" /></div>
  12.     </div>
  13. </div>
复制代码
代码很简单,包含了2个部分,一个点击元素,一个用来展示颜色选择器的元素。

Javascript代码

  1. $(function(){
  2.     var bCanPreview = true; // can preview

  3.     // create canvas and context objects
  4.     var canvas = document.getElementById('picker');
  5.     var ctx = canvas.getContext('2d');

  6.     // drawing active image
  7.     var image = new Image();
  8.     image.onload = function () {
  9.         ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
  10.     }

  11.     // select desired colorwheel
  12.     var imagesrc="images/colorwheel1.png";
  13.     switch ($(canvas).attr('var')) {
  14.         case '2':
  15.             imagesrc="images/colorwheel2.png";
  16.             break;
  17.         case '3':
  18.             imagesrc="images/colorwheel3.png";
  19.             break;
  20.         case '4':
  21.             imagesrc="images/colorwheel4.png";
  22.             break;
  23.         case '5':
  24.             imagesrc="images/colorwheel5.png";
  25.             break;
  26.     }
  27.     image.src = imageSrc;

  28.     $('#picker').mousemove(function(e) { // mouse move handler
  29.         if (bCanPreview) {
  30.             // get coordinates of current position
  31.             var canvasOffset = $(canvas).offset();
  32.             var canvasX = Math.floor(e.pageX - canvasOffset.left);
  33.             var canvasY = Math.floor(e.pageY - canvasOffset.top);

  34.             // get current pixel
  35.             var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
  36.             var pixel = imageData.data;

  37.             // update preview color
  38.             var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
  39.             $('.preview').css('backgroundColor', pixelColor);

  40.             // update controls
  41.             $('#rVal').val(pixel[0]);
  42.             $('#gVal').val(pixel[1]);