奇葩面试题 取两个颜色之间的10等分色值 发布日期:2016-07-20 09:29:02     博主推荐★

今天在群里看到一个极其无聊的面试题,当时我能想到的方法就是用ps拉一个渐变,后来一个突然有人冒出用canvas,现将代码整理出来,希望对大家有所帮助 


原题:

给定两个css的颜色值,比如#CCC和#f0bc89,求两个颜色之间的10个等分色


var canvas = document.createElement_x('canvas'),
ctx = canvas.getContext('2d'),
colorWrap = document.createElement_x('div'),
i = 0,
point = 10,
width = 100,
grad,
html='';
canvas.width = width;
canvas.height = width;
  ctx.beginPath();
grad = ctx.createLinearGradient(0,0, 0, width);  
grad.addColorStop(0, '#CCC');  
grad.addColorStop(1, '#F0BC89'); 
ctx.fillStyle = grad;  
ctx.fillRect(0, 0, width, width);
ctx.fill();
// 取得10个点
for(var i=0;i<10;i++){
var pixel = ctx.getImageData(0, point*i, 1, 1).data;     
console.log('#'+pixel[0].toString(16)+pixel[1].toString(16)+pixel[2].toString(16));
      
}
// document.body.appendChild( canvas );
//  colorWrap.id = 'J_color_wrap';
//  colorWrap.innerHTML = html;
//  document.body.appendChild( colorWrap );


博文地址:https://blog.ahamu.cn/blog/detail.html?id=9
   
推荐文章
  • 1
    php -i查看信息
    2020/02/23
  • 2
    phpStorm中使用xdebug工具调试dock
    2019/12/09
  • 3
    讲的比较好的B+树执行原理的文章
    2019/12/09
  • 4
    如何用Dockerfile构建镜像
    2019/12/09
  • 5
    Linux服务器内存消耗过高
    2019/10/24
  • 6
    解决现有问题的方式方法
    2019/10/15
  • 7
    PHP对象的深克隆方法
    2019/10/12
  • 8
    ES演示文稿【二】
    2019/09/23
  • 9
    ES演示文稿
    2019/09/23
  • 10
    kibana正则表达式demo
    2019/09/23
  • 11
    聊天有序集合
    2019/09/23
  • 12
    分销员授权登陆逻辑思维导图
    2019/09/18
  • 13
    logstash配置记录
    2019/09/02
  • 14
    比较好用的过滤表情的正则
    2019/08/13
  • 15
    Linux中的screen命令使用
    2019/08/12
  • 16
    网站开发神奇【图片视频压缩网站】
    2019/07/24
  • 17
    windows安装sqlsrv遇到的问题
    2019/07/05
  • 18
    遇到服务空间有一部分没有使用的情况怎么扩展
    2019/06/20
  • 19
    阿里云磁盘空间扩容遇到的问题
    2019/06/20
  • 20
    关于用xhell连接linux虚拟机频繁出现Soc
    2019/06/15
最喜标签
NYOJ 面试 AJAX ping CentOS 灰度算法 YII2