本文介绍了使用HTML5画布创建颜色选择的渐变(所有可能的RGB颜色)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 可以为线性颜色选择器添加包含所有可能的RGB颜色(只有红色,绿色,蓝色 - 无alpha值)的线性渐变。 到目前为止,我已经尝试它与以下渐变,但它不包含从 rgb(0,0,0)到 rgb的所有值(255,255,255): var grd = ctx.createLinearGradient(0,0,width,0) ; grd.addColorStop(0,'red'); grd.addColorStop(1/6,'orange'); grd.addColorStop(2/6,'yellow'); grd.addColorStop(3/6,'green') grd.addColorStop(4/6,'aqua'); grd.addColorStop(5/6,'blue'); grd.addColorStop(1,'purple'); 任何帮助都非常感激。 主要原因是24位RGB包含16,777,216种颜色(256 )。只是为了得到一个估计,你将需要一个4096 x 4096像素的屏幕分辨率(当然没有这样的方形屏幕,但相当于一个实际的显示器的约16:9格式)。 简单地说:没有空间可以在正常屏幕上放置所有像素。 使用渐变,因为这只向一个方向为画布。您需要在两个方向上绘制颜色,您需要直接手动操作位图。 我的建议是拍摄现有的调色板的屏幕快照,将该图像绘制到画布上。这将量化颜色(这也发生在所有可用的颜色选择器),但会给你一个接近你需要的颜色。 此外,你可以添加滑块精细调整值以及文本框(后者在纯画布中有点复杂,但您可以组合使用html和canvas来实现这一点)。 表示所有颜色的近似值可以是这样的(来自以下演示的快照): 更新 Ok,我答应回答你从一个RGB值计算位置。从图像中的调色板开始,您可以通过将颜色转换为HSV颜色空间来轻松计算位置。 将RGB转换为HSV的功能如下所示: / p> function rgb2hsv(){ var rr,gg,bb, $ b br = arguments [0] / 255,g = arguments [1] / 255,b = arguments [2] / 255,h,s, v = Math .max(r,g,b), diff = v-Math.min(r,g,b), diffc = function(c){ return(v- / 6 / diff + 1/2; }; if(diff === 0){ h = s = 0; } else { s = diff / v; rr = diffc(r); gg = diffc(g); bb = diffc(b); if(r === v){h = bb - gg} else if(g === v){h =(1/3)+ rr - bb} else if(b === v){h =(2/3)+ gg-rr}; if(h else if(h> 1){h- = 1} } return { h:(h * 360 + 0.5)| 0,s:(s * 100 + 0.5)| 0,v:(v * 100 + 0.5)| 0 } }; 现在,颜色用度数(0-359),饱和度0-100)。 要获得水平位置,你所需要做的就是在360上分割调色板的宽度,并乘以h(hue)。要获得垂直位置,请在上部和下部分割调色板。如果饱和度 function getPos(canvas,h,s,v){ var m = canvas.height / 2,x = canvas.width / 360 * h,y; if(s === 100&& v === 100){ y = m; } else if(v === 100&& s< 100){ y = m / 100 * s; } else if(s === 100&& v< 100){ y = m / 100 *(100-v) } x =(x + 0.5)| 0; // convert to integer y =(y + 0.5)| 0; }; 这当然会要求您生成的调色板非常准确。 演示 请注意,光标不是基于鼠标位置设置的,而是基于RGB(HSV)值设置的。它首先从鼠标位置选择一个颜色RGB,然后将其转换为HSV并从中计算位置。 调色板是相对于窗口大小动态生成的。 p> 还值得一提的是纯色采摘,梯度问题看起来很顺利,就是它们抖动。这意味着您可以获取显然不在您选择的范围内的像素值。 为了减少这个问题,当你做一个颜色选择,你会需要平均你从鼠标获得的x和y位置周围的面积。 Is it possible to greate a linear gradient which contains all possible RGB colors (only red, green, blue - no alpha values) for a linear color picker.So far I've tried it with the following gradient, but it doesn't contain all values from rgb(0,0,0) to rgb(255,255,255) :var grd = ctx.createLinearGradient(0, 0, width, 0);grd.addColorStop(0, 'red');grd.addColorStop(1 / 6, 'orange');grd.addColorStop(2 / 6, 'yellow');grd.addColorStop(3 / 6, 'green')grd.addColorStop(4 / 6, 'aqua');grd.addColorStop(5 / 6, 'blue');grd.addColorStop(1, 'purple');Any help is highly appreciated. 解决方案 Unfortunately no you can't.The main reason is that 24-bit RGB contains 16,777,216 number of colors (256). Just to get an estimate you will will need a screen resolution that is 4096 x 4096 pixels (of course there is no such square screen, but the equivalent would be in about 16:9 format of that for an actual monitor).Simply put: there is no room to place all the pixels on a normal screen.In addition you will get problem using a gradient as this goes only in one direction for canvas. You would need to plot the color in two directions which you need to do manually manipulating the bitmap directly.My suggestion is to take a screen snapshot of an existing such palette and draw that image onto the canvas. This will quantize the colors (this also happens in all available color pickers) but will give you a close approximation to the color you need.In addition you can add sliders to fine-adjust the value as well as text boxes (the latter is a bit complicated in pure canvas, but you can make a combination of html and canvas to achieve this).An approximation representing "all" colors could be like this (snapshot from demo below):UpdateOk, I promised to get back to you about calculating the position from a RGB value. Starting in a palette as in the image you can easily calculate the position by converting the color to HSV color space.The function to do RGB to HSV looks like this:function rgb2hsv() { var rr, gg, bb, r = arguments[0] / 255, g = arguments[1] / 255, b = arguments[2] / 255, h, s, v = Math.max(r, g, b), diff = v - Math.min(r, g, b), diffc = function (c) { return (v - c) / 6 / diff + 1 / 2; }; if (diff === 0) { h = s = 0; } else { s = diff / v; rr = diffc(r); gg = diffc(g); bb = diffc(b); if (r === v) {h = bb - gg} else if (g === v) {h = (1 / 3) + rr - bb} else if (b === v) {h = (2 / 3) + gg - rr}; if (h < 0) {h += 1} else if (h > 1) {h -= 1} } return { h: (h * 360 + 0.5) |0, s: (s * 100 + 0.5) |0, v: (v * 100 + 0.5) |0 }};Now color is represented in degrees (0-359), saturation (0-100) and luminance (0-100).To get horizontal position all you need to do is to divide width of your palette on 360 and multiply with h (hue). To get vertical position you split the palette in upper part and lower part. If saturation is < 100 then you're in the upper part, if V < 100 then you're in lower part:function getPos(canvas, h, s, v) {var m = canvas.height / 2, x = canvas.width / 360 * h, y;if (s === 100 && v === 100) { y = m;} else if (v === 100 && s < 100) { y = m / 100 * s;} else if (s === 100 && v < 100) { y = m / 100 * (100 - v) + m;}x = (x + 0.5) |0; //convert to integery = (y + 0.5) |0;};This will of course require that the palette you generate is very accurate.DemoNotice the cursor is not set based on mouse position, but on RGB (HSV) value. It first picks a color RGB from mouse position, then converts it to HSV and calculate the position from that.The palette is generated dynamically in relation to window size.Also worth to mention for plain color picking, is that the problem with gradients that seems smooth is that they are dithered. This means that you can get a pixel value that apparently is not in the range you're picking from.To reduce this problem when you do a color pick, you will need to average the area around the x and y position you get from the mouse. 这篇关于使用HTML5画布创建颜色选择的渐变(所有可能的RGB颜色)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-23 03:59
查看更多