使用JavaScript和Canvas的ColorPicker实现

我正在尝试使用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();

目前,我只想使用更好的算法解决冻结问题,并且不显示黑色和灰色.
请有人帮我.

解决方法:

与为每个像素调用fillRect相比,使用原始RGBA缓冲区可能会更有效.您可以使用context.getImageData获得一个,用颜色值填充它,然后使用context.putImageData将其放回一遍.

请注意,您当前的代码将每个单个像素覆盖255次,每个可能的蓝色值覆盖一次.每个像素的最终通过是255蓝色,因此您看不到输出中的灰色和黑色.

找到一种将所有可能的RGB值映射到二维图像的好方法并非易事,因为RGB是三维颜色空间.这样做有很多策略,但是对于任何可能的用例,都不是最佳选择.您可以在AllRGB.com上找到一些针对该问题的创造性解决方案.其中一些解决方案可能适合某些用例的颜色选择器.

标签：javascript,html5,canvas,html5-canvas,color-picker
来源： https://codeday.me/bug/20191010/1883530.html