这篇教程介绍了如何使用HTML5和Canvas创建一个简单的颜色选择器。教程详细讲解了从HTML布局、JavaScript代码到CSS样式的实现过程，并提供了5个不同色轮的现场演示。通过点击预览元素显示和隐藏颜色选择器，鼠标移动时实时更新颜色信息。
画布拓展颜色无法选择
HTML5 Color Picker (canvas) In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our today’s goal – to create something similar, and even better. In order to make it more unique, there are 5 different colorwheels which you can use. If you are ready – let’s start.
HTML5颜色选择器(画布)在我们的新教程中，我们将使用HTML5创建一个简单但有效的颜色选择器。 我认为您已经看到了不同的jQuery版本的colorpicker，这是我们今天的目标–创建类似的东西，甚至更好。 为了使其更独特，可以使用5种不同的色轮。 如果您准备好了，那就开始吧。
It is the very time to test our demos and download the sources:
现在是时候测试我们的演示并下载源代码了：
现场演示1
现场演示2
现场演示3
现场演示4
现场演示5
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
If you are ready – let’s start coding !
如果您准备好了，那就开始编码吧！
步骤1. HTML (Step 1. HTML)
Our first step is html markup:
我们的第一步是html标记：
<!-- preview element -->
<div class="preview"></div>
<!-- colorpicker element -->
<div class="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<div class="controls">
<div><label>R</label> <input type="text" id="rVal" /></div>
<div><label>G</label> <input type="text" id="gVal" /></div>
<div><label>B</label> <input type="text" id="bVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
</div>
</div>
<!-- preview element -->
<div class="preview"></div>
<!-- colorpicker element -->
<div class="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<div class="controls">
<div><label>R</label> <input type="text" id="rVal" /></div>
<div><label>G</label> <input type="text" id="gVal" /></div>
<div><label>B</label> <input type="text" id="bVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
</div>
</div>
As you see, our color picker consists of two main components: the preview element and the hidden (by default) color picker element. Once we click by preview element – we will display color picker.
如您所见，我们的颜色选择器包括两个主要组件：预览元素和隐藏的(默认情况下)颜色选择器元素。 单击预览元素后，我们将显示颜色选择器。
第2步：JS (Step 2. JS)
Our next step – is javascript. Please review our result code:
我们的下一步-是javascript。 请查看我们的结果代码：
js / script.js (js/script.js)
$(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 '2':
imageSrc = 'images/colorwheel2.png';
break;
case '3':
imageSrc = 'images/colorwheel3.png';
break;
case '4':
imageSrc = 'images/colorwheel4.png';
break;
case '5':
imageSrc = 'images/colorwheel5.png';
break;
}
image.src = imageSrc;
$('#picker').mousemove(function(e) { // mouse move 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]+")";
$('.preview').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;
});
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
});
$(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 '2':
imageSrc = 'images/colorwheel2.png';
break;
case '3':
imageSrc = 'images/colorwheel3.png';
break;
case '4':
imageSrc = 'images/colorwheel4.png';
break;
case '5':
imageSrc = 'images/colorwheel5.png';
break;
}
image.src = imageSrc;
$('#picker').mousemove(function(e) { // mouse move 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]+")";
$('.preview').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;
});
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
});
As you can see – there are only 64 lines of our colorpicker, so, as usual, in the beginning we create new canvas and context objects, then – draw an color wheel on the context. As you see – there is small switch case to select desired image (of colorwheel), I decided to use a new attribute for canvas object: ‘var’. So, you can easily change this colorwheel with different ‘var’ value, example:
如您所见-我们的选色器只有64行，因此，像往常一样，一开始我们会创建新的画布和上下文对象，然后-在上下文上绘制一个色轮。 如您所见–有一个很小的开关盒来选择所需的图像(色轮)，我决定为canvas对象使用一个新属性：'var'。 因此，您可以轻松地使用不同的“ var”值更改此色轮，例如：
<canvas id="picker" var="1" width="300" height="300"></canvas>
or
<canvas id="picker" var="2" width="300" height="300"></canvas>
or
<canvas id="picker" var="3" width="300" height="300"></canvas>
or
<canvas id="picker" var="4" width="300" height="300"></canvas>
or
<canvas id="picker" var="5" width="300" height="300"></canvas>
<canvas id="picker" var="1" width="300" height="300"></canvas>
or
<canvas id="picker" var="2" width="300" height="300"></canvas>
or
<canvas id="picker" var="3" width="300" height="300"></canvas>
or
<canvas id="picker" var="4" width="300" height="300"></canvas>
or
<canvas id="picker" var="5" width="300" height="300"></canvas>
Well, finally, we have to add event handlers to next events: mousemove (by picker), click (by picker) and click (by preview). As you remember we have to display and hide color picker when we click at Preview element. In order to achieve it – I use ‘fadeToggle’ jQuery function (which was added in version 1.4.4):
好了，最后，我们必须将事件处理程序添加到下一个事件：mousemove(按选择器)，单击(按选择器)和单击(按预览)。 您还记得，当单击“预览”元素时，我们必须显示和隐藏颜色选择器。 为了实现它–我使用了“ fadeToggle” jQuery函数(已在1.4.4版中添加)：
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
$('.preview').click(function(e) { // preview click
$('.colorpicker').fadeToggle("slow", "linear");
bCanPreview = true;
});
When we move our mouse over the Picker object – we should refresh information about current color, and, once we click at the Picker object – we should fix current color (or – disable preview by mousemove):
当我们将鼠标移到Picker对象上时-我们应该刷新有关当前颜色的信息，并且一旦单击Picker对象-我们就应该修复当前颜色(或-通过鼠标移动禁用预览)：
$('#picker').mousemove(function(e) { // mouse move 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]+")";
$('.preview').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;
});
$('#picker').mousemove(function(e) { // mouse move 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]+")";
$('.preview').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;
});
步骤3. CSS (Step 3. CSS)
There are CSS styles of our color picker:
我们的颜色选择器有CSS样式：
/* 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;
}
/* 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;
}
现场演示1
现场演示2
现场演示3
现场演示4
现场演示5
结论 (Conclusion)
We have just created own small and effective color picker with HTML5 (canvas). I hope that you like it. I will be glad to see your thanks and comments. Good luck!
我们刚刚使用HTML5(画布)创建了自己的小型且有效的颜色选择器。 我希望你喜欢。 看到您的感谢和评论，我将非常高兴。 祝好运！
翻译自: https://www.script-tutorials.com/html5-color-picker-canvas/
画布拓展颜色无法选择
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
