js颜色选择器 制作分析

  1. 给html元素设置事件监听, 触发事件 弹出颜色选择器
  2. 颜色选择器绘制
    1. 获取上次选择的颜色(当前颜色)
    2. 绘制渐变色板(canvas) (方法: 横轴渐变ff0000, ffff00, 00ff00, 00ffff, 0000ff, ff00ff, ff0000,覆盖纵轴渐变[渐变的是透明度,白色为hsv模式中的饱和度], 右边灰度调节底层纯色填充,上层黑色,透明度0-1渐变 )
    3. 绘制坐标指针(当前颜色标识)
  3. 颜色选择器设置事件监听获取颜色
    1. 设置鼠标点击选取颜色,坐标指针同步
    2. 设置拖拽事件颜色预览
  4. 向html元素返回选择的颜色值并改变相关css样式
posted @ 2016-04-12 09:24  _即炤  阅读(850)  评论(0)  编辑  收藏  举报