你的位置:首页 > 软件开发 > 网页设计 > HTML5、canvas颜色拾取器

HTML5、canvas颜色拾取器

发布时间:2016-03-17 16:00:04
效果图:代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>canvas 颜色拾取 ...

 效果图:

HTML5、canvas颜色拾取器

代码:

<!doctype html><html lang="en"><head>  <meta charset="UTF-8" />  <title>canvas 颜色拾取器</title>  <style>    #canvas {      border: 1px solid red;    }    #block {      display: inline-block;      width:50px;      height: 50px;      vertical-align: top;      background-color: black;    }  </style></head><body>    <canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>  <span id="block"></span>  <script>    //获取id     var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    //绘制填充颜色块     for(var i = 0; i < 16; i++) {      for(var j = 0; j < 16; j++) {        // gba(255,255,0) --->gba(255,0,0)        ctx.fillStyle = "rgb("+(255 - j*16)+","+(255 - i*16)+",0)";        ctx.fillRect(i*25,j*25,25,25);      }    }    // 显示获取的颜色    var block = document.getElementById("block");    // 点击利用imgDate获取rgb值    canvas.onclick = function(e) {      var e = e || window.event;      //e.layerX,e.layerY相对于绑定事件对象canvas的坐标      var x = e.layerX;      var y = e.layerY;      // console.log(e);      var imgData = ctx.getImageData(x,y,1,1);      var r = imgData.data[0];      var g = imgData.data[1];      var b = imgData.data[2];            block.style.backgroundColor = "rgb("+r+","+g+","+b+")";    }  </script></body></html>

原标题:HTML5、canvas颜色拾取器

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。