色彩选择器（colorPicker)

最新推荐文章于 2024-09-12 07:33:39 发布

wobenng

最新推荐文章于 2024-09-12 07:33:39 发布

阅读量1.6w

点赞数 1

本文链接：https://blog.csdn.net/wobenng/article/details/72821639

版权

本文介绍了作者在学习前端知识时，根据网上教程制作色彩选择器的过程。通过HTML5的canvas元素，结合JavaScript实现了色相条的渐变、颜色选择器的移动以及RGB和HSL之间的转换。文章详细阐述了各个部分的实现细节，并提出了一些学习方法和代码优化的疑问。

摘要由CSDN通过智能技术生成

跟随网上教程学习前端知识迄今为止3个月，这个色彩选择器是根据网上教程的任务所做的，在此之前，我完全不知道也没想过JavaScript居然还能做这样一个东西，所以刚开始看到这个任务的时候是一头雾水。以下是我做这个色彩选择器的过程。

.我学过用HTML和CSS做一个静态的网页，但是我是不了解HTML5的，我大概浏览了一下别人所写的代码，看到了<canvas>这个元素标签，查找之后，知道它是一个画布，那么如何产生色彩选择器的颜色就确定了。
（我在刚开始学的时候有上网了解过，他人的建议大概是：要自己多思考怎么写，不是拿别人的代码。而我碰到不会的任务时，我的做法是，比如这次的画布，我先看了别人的代码，然后我会记录下来别人代码里出现的我所没见过的元素标签、JS对象的属性和方法，但不是直接采用别人的想法（实际上我不太看的懂别人的代码，有些也没有注释，有时候自己有头绪写速度反而比看别人的更快），然后去查找，这会让我有一个头绪，接下来自己慢慢写，我不知道这样一个方法是不是比较好的学习方法，希望有好方法的人看到这段文字并且恰巧又有时间的话，可以帮忙提供给我，先说声谢谢！）；
做颜色选择器得了解颜色的知识，在那个任务下有学员提供了一份笔记，我自己理解了后，如下（我写的时候是用chorm看效果的）：
色彩选择器demo
R——红色,G——绿色,B——blue，也就是三原色； H——色相，S——饱和度，L——明度；以及将RGB或者HSL转为十六进制来代表颜色。PS上的色彩选择器有一个色相条，它是将12色相环（所以H的取值就是0°~360°）头尾拆开变成条形，在色相环的画布上利用渐变来”上色“；
```
  //颜色棒的渐变 

      var context2=bar.getContext("2d"); 

      var  grd2 = context2.createLinearGradient(0,0,0,600); 

      grd2.addColorStop(0,"rgb(255,0,0)"); 

      grd2.addColorStop(1/6,"rgb(255,255,0)"); 

      grd2.addColorStop(1/3,"rgb(0,255,0)"); 

      grd2.addColorStop(1/2,"rgb(0,255,255)"); 

      grd2.addColorStop(2/3,"rgb(0,0,255)"); 

      grd2.addColorStop(5/6,"rgb(255,0,255)"); 

      grd2.addColorStop(1,"rgb(255,0,0)"); 

      context2.fillStyle=grd2; 

      context2.fillRect(0,0,10,600) 
```
而左边大画布上的颜色变化是随着色相的变化而变化的，也就是H值0°~360°。在色相条上滑动圆形选择器时，利用getImageData()的方法来获取发生变化时相应的颜色值，但是不是利用putImageData()将颜色填充到画布上，因为画布上的颜色还有一个饱和度和明度的变化，所以画布上的颜色应该是从左至右有一个饱和度的变化，即从白色渐变到色相条上被选择的颜色，这个颜色是变化的，所以可以在其变化时将其作为一个函数的参数传递到函数，执行函数，然后进行渐变；同时画布上明度的变化，也可以被包括在该函数中，下面是从色相条上获取颜色的方法，有一点值得注意的是，色相条上的颜色变化来自色相条上颜色的变化，而右下角方框的颜色变化来自画布上圆形选择器的颜色变化，所以色相条上的颜色变化导致的一系列变化有：色相条上圆形选择器的背景色变化和画布上颜色的变化 → 画布上颜色发生变化，那么位于画布上圆形选择器选中颜色的变化 → RGB和HSL值的变化,展示方框颜色的变化：

       
move.οnmοusedοwn=function(event){
    flag=true;
//这里的全局变量是让鼠标移动的时候可以取点击时的值          moveTop=move.offsetTop;
     nowY=event.clientY;
     } 
    document.addEventListener("mousemove",function(event){
    var  moveY=event.clientY;
    dis=moveY-nowY;
    finalTop=moveTop+dis; 
    if(flag){
    if(bar.offsetTop&#