I'm trying to implement ColorPicker using Canvas just for fun. But i seem lost. as my browser is freezing for a while when it loads due to all these for loops.
I'm adding the screenshot of the result of this script:
window.onload = function(){
colorPicker();
}
function colorPicker(){
var canvas = document.getElementById("colDisp"),
frame = canvas.getContext("2d");
var r=0,
g=0,
b= 0;
function drawColor(){
for(r=0;r<255;r++){
for(g=0;g<255;g++){
for(b=0;b<255;b++){
frame.fillStyle="rgb("+r+","+g+","+b+")";
frame.fillRect(r,g,1,1);
}
}
}
}
drawColor();
使用原始 RGBA 缓冲区可能会更有效，而不是为每个像素调用 fillRect。您可以使用以下方式获取一个上下文.getImageData https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#getImageData%28%29，用颜色值填充它，然后使用一次将其放回原处上下文.putImageData https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#putImageData%28%29.
请注意，您当前的代码会覆盖每个像素 255 次，每个可能的蓝色值一次。每个像素的最终通道是 255 蓝色，因此您在输出中看不到灰色和黑色。
找到一种将所有可能的 RGB 值映射到二维图像的好方法并非易事，因为 RGB 是三维颜色空间。有很多策略可以实现这一点，但对于任何可能的用例来说，没有一种策略是真正最佳的。您可以在以下位置找到解决此问题的一些创意解决方案AllRGB.com http://allrgb.com/。其中一些可能适合某些用例的颜色选择器。