标签：javascript html5 canvas html5-canvas color-picker

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。