这是一个使用canvas制作的，支持PC和移动端的颜色

这是demo链接，支持PC和移动端。

这里全采用canvas制作，没有使用到图片。

commonjs:

import ColorPicker from '../colorPicker.js' new ColorPicker({ dom: '.wrap', width: 200,//画布宽高 height: 200, outsideWidh: 30, callback(color) { // color } }).init()

通过 script 标签引入

<script src='colorPicker.js'></script> window.ColorPicker({ ... })

不需要写 html 和 css

可以兼容到ie9。

首先把外环的颜色制作出来，这里使用了hsl来处理。

使用moveTo和lineTo，一条条线的绘制出来。起始位置是内圆坐标，终点位置外圆坐标，这样就可以制作出圆环了，而且中心是透明无色的。

const ctx = this.ctx for (let i = 0; i < 360; i += 0.1) { // 获取度数 const rad = i * (2 * Math.PI) / 360, c_x = Math.cos(rad), c_y = Math.sin(rad), lineW = this.lineW ctx.strokeStyle = "hsl(" + i + ", 100%, 50%)" ctx.beginPath() ctx.moveTo(x + (x - lineW) * c_x, y + (y - lineW) * c_y) // 求出另外两点坐标 ctx.lineTo(x + x * c_x, y + y * c_y) ctx.stroke() ctx.closePath() } 绘制正方形的颜色。

这里是用从外环获取的颜色，加上白色从左到右的渐变，加上黑色从下到上的渐变，制造出来的。外环每次改变颜色后，正方形的颜色都要改变。

reateInsideColor(color) { // 生成内颜色 const ctx = this.ctx, rectW = this.rectW, rectX = this.rectX // 起点坐标 // 清除指定区域 ctx.clearRect(rectX, rectX, rectW, rectW) ctx.fillStyle = color ctx.fillRect(rectX, rectX, rectW, rectW) // 白色 let g = ctx.createLinearGradient(rectX, (rectX + rectW) / 2, rectX + rectW, (rectX + rectW) / 2) g.addColorStop(0, "#FFFFFF") g.addColorStop(1, "rgba(255,255,255,0)") ctx.fillStyle = g ctx.fillRect(rectX, rectX, rectW, rectW) // 黑色 g = ctx.createLinearGradient(rectX, rectX + rectW, rectX, rectX) g.addColorStop(0, "#000000") g.addColorStop(1, "rgba(0,0,0,0)") ctx.fillStyle = g ctx.fillRect(rectX, rectX, rectW, rectW) } 获取颜色

获取颜色就是用到了canvas的getImageData，获取到x,y坐标后，ctx.getImageData(x,y,1,1)得到颜色的数据，最后组装下就获取到rgb了。

这里先求出移动的点到圆心点的距离，再判断这段距离是否大于内圆的半径且小于外圆的半径，这样就可以了。

如果哪里有问题希望可以提出来，我再改进下，谢谢~~ :)