这是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。
使用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了。
这里先求出移动的点到圆心点的距离,再判断这段距离是否大于内圆的半径且小于外圆的半径,这样就可以了。
如果哪里有问题希望可以提出来,我再改进下,谢谢~~ :)