javascript - 使用 JavaScript 和 Canvas 实现 ColorPicker

Question

我尝试使用 Canvas 实现 ColorPicker 只是为了好玩。但我似乎迷失了。因为我的浏览器在加载时由于所有这些 for 循环而卡住了一段时间。 我正在添加此脚本结果的屏幕截图:

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();

目前，我只想用更好的算法解决卡住问题，并且它不显示黑色和灰色。请有人帮助我。

Answer 1

使用原始 RGBA 缓冲区可能会更有效，而不是为每个像素调用 fillRect。您可以使用 context.getImageData 获取一个，用颜色值填充它，然后使用 context.putImageData 一次性将其放回去。 .

请注意，您当前的代码会覆盖每个像素 255 次，每个可能的蓝色值一次。每个像素的最终 channel 是 255 蓝色，因此您在输出中看不到灰色和黑色。

找到一种将所有可能的 RGB 值映射到二维图像的好方法并非易事，因为 RGB 是三维颜色空间。有很多策略可以实现这一点，但对于任何可能的用例来说，没有一种策略是真正最佳的。您可以在 AllRGB.com 上找到针对此问题的一些创意解决方案。 。其中一些可能适合某些用例的颜色选择器。