Shulou(Shulou.com)06/03 Report--

How to use HTML5 technology to develop a cool color picker, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

You may have seen a lot of color selectors developed using jquery/js, and today we will use HTML5 technology to implement a better color picker ourselves. I hope you like it!

The code is as follows:

R

G

B

RGB

HEX

The code is simple and consists of two parts, one click element and one element used to display the color picker.

JavaScript code

The code is as follows:

$(function () {)

Var bCanPreview = true; / / can preview

/ / create canvas and context objects

Var canvas = document.getElementById ('picker')

Var ctx = canvas.getContext ('2d')

/ / 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

}

/ / select desired colorwheel

Var imagesrc= "images/colorwheel1.png"

Switch ($(canvas) .attr ('var')) {

Case '2clients:

Imagesrc= "images/colorwheel2.png"

Break

Case '3pm:

Imagesrc= "images/colorwheel3.png"

Break

Case '4pm:

Imagesrc= "images/colorwheel4.png"

Break

Case '5clients:

Imagesrc= "images/colorwheel5.png"

Break

}

Image.src = imageSrc

$('# picker') .mousemove (function (e) {/ / mousemove handler

If (bCanPreview) {

/ / get coordinates of current position

Var canvasOffset = $(canvas) .offset ()

Var canvasX = Math.floor (e.pageX-canvasOffset.left)

Var canvasY = Math.floor (e.pageY-canvasOffset.top)

/ / get current pixel

Var imageData = ctx.getImageData (canvasX, canvasY, 1,1)

Var pixel = imageData.data

/ / update preview color

Var pixelColor = "rgb (" + pixel [0] + "," + pixel [1] + "," + pixel [2] + ")"

$('.clients') .css ('backgroundColor', pixelColor)

/ / update controls

$('# rVal') .val (pixel [0])

$('# gVal') .val (pixel [1])

$('# bVal') .val (pixel [2])

$('# rgbVal') .val (pixel [0] +','+ pixel [1] +','+ pixel [2])

Var dColor = pixel [2] + 256 * pixel [1] + 65536 * pixel [0]

$('# hexVal') .val ('#'+ ('0000' + dColor.toString (16)) .substr (- 6))

}

});

$('# picker') .click (function (e) {/ / click event handler

BCanPreview =! bCanPreview

});

$('.clients') .click (function (e) {/ / preview click

('.colorpicker') .fadeToggle ("slow", "linear")

BCanPreview = true

});

});

As you can see, this is a very short js code that is used to create new canvases and objects, and then we draw a circular color board. You can choose different color backplane. A parameter is used here to set different choices. As follows:

The code is as follows:

Let's add an event: the mousemove,click event. JQuery is used here to show and hide selectors.

The code is as follows:

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

When we move the mouse over the selected object, we need to refresh the information, for example, the current color

The code is as follows:

$('# picker') .mousemove (function (e) {/ / mousemove handler

If (bCanPreview) {

/ / get coordinates of current position

Var canvasOffset = $(canvas) .offset ()

Var canvasX = Math.floor (e.pageX-canvasOffset.left)

Var canvasY = Math.floor (e.pageY-canvasOffset.top)

/ / get current pixel

Var imageData = ctx.getImageData (canvasX, canvasY, 1,1)

Var pixel = imageData.data

/ / update preview color

Var pixelColor = "rgb (" + pixel [0] + "," + pixel [1] + "," + pixel [2] + ")"

$('.clients') .css ('backgroundColor', pixelColor)

/ / update controls

$('# rVal') .val (pixel [0])

$('# gVal') .val (pixel [1])

$('# bVal') .val (pixel [2])

$('# rgbVal') .val (pixel [0] +','+ pixel [1] +','+ pixel [2])

Var dColor = pixel [2] + 256 * pixel [1] + 65536 * pixel [0]

$('# hexVal') .val ('#'+ ('0000' + dColor.toString (16)) .substr (- 6))

}

});

$('# picker') .click (function (e) {/ / click event handler

BCanPreview =! bCanPreview

});

CSS code

CSS of different color backplane:

The code is as follows:

/ * colorpicker styles * /

.colorpicker {

Background-color: # 222222

Border-radius: 5px 5px 5px 5px

Box-shadow: 2px 2px 2px # 444444

Color: # FFFFFF

Font-size: 12px

Position: absolute

Width: 460px

}

# picker {

Cursor: crosshair

Float: left

Margin: 10px

Border: 0

}

.controls {

Float: right

Margin: 10px

}

.controls > div {

Border: 1px solid # 2F2F2F

Margin-bottom: 5px

Overflow: hidden

Padding: 5px

}

.controls label {

Float: left

}

.controls > div input {

Background-color: # 121212

Border: 1px solid # 2F2F2F

Color: # DDDDDD

Float: right

Font-size: 10px

Height: 14px

Margin-left: 6px

Text-align: center

Text-transform: uppercase

Width: 75px

}

.preview {

Background: url (".. / images/select.png") repeat scroll center center transparent

Border-radius: 3px

Box-shadow: 2px 2px 2px # 444444

Cursor: pointer

Height: 30px

Width: 30px

}

After reading the above, have you mastered how to use HTML5 technology to develop a cool color picker? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.