css色轮、饼图、色轮

时间：2023-03-26 21:39:32 JavaScript

#rgba{文本对齐：中心；显示：弹性；弹性方向：列；对齐项目：居中；证明内容：居中；#color-pan{宽度：250px；高度：250px；边界半径：50%；背景：圆锥渐变（红色、黄色、石灰、浅绿色、蓝色、紫红色、红色）；}.this-color{宽度：100px；高度：30px；背景：#000；}}1.应根据要求实施色轮选择器。2.环顾四周无果，只能用图片来实现。3.在阅读《揭秘css》的过程中，发现了CSS的一个新属性，分享给大家。背景：圆锥渐变（红色、黄色、青柠色、浅绿色、蓝色、紫红色、红色）；4.这个调色板是这样实现的，但是由于是新属性，存在兼容性问题，使用时需要多调试。5.当然，挑颜色需要用到监听鼠标位置的属性，通过position计算出角度和到圆心的距离，再通过公式计算出颜色。用到了三角函数，优化后贴出来。<模板>

#rgba{文本对齐：中心；显示：弹性；弹性方向：列；对齐项目：居中；证明内容：居中；#color-pan{宽度：250px；高度：250px；边界半径：50%；背景：圆锥渐变（红色、黄色、石灰、浅绿色、蓝色、紫红色、红色）；}.this-color{宽度：100px；高度：30px；背景：#000；}}exportfunctionHsvToRgb(data){varh=data[0],s=data[1],v=data[2];小号=小号/100;v=v/100；变种r=0,g=0,b=0;vari=parseInt((h/60)%6);varf=h/60-i;varp=v*(1-s);varq=v*(1-f*s);vart=v*(1-(1-f)*s);switch(i){case0:r=v;g=t;b=p;休息;情况1：r=q；g=v;b=p;休息;情况2：r=p；g=v;b=t;布雷啊;情况3：r=p；g=q;b=v;休息;情况4：r=t；;休息;默认值：中断；}r=parseInt(r*255.0)g=parseInt(g*255.0)b=parseInt(b*255.0)constrgb='rgb('+r+','+g+','+b+')'返回rgb}不支持新的css属性生成色轮，可以使用图片