Html5 + JavaScript 写了一个拾色器

最新推荐文章于 2021-06-10 03:12:34 发布

dushaobindoudou

最新推荐文章于 2021-06-10 03:12:34 发布

阅读量1.6k

点赞数

文章标签： html5 javascript function input

本文链接：https://blog.csdn.net/dushaobindoudou/article/details/5856246

版权

代码实现浏览用火狐支持必须html5

主要用到了Cavans 根据像素得到该位置的rgba 的颜色值

<html>
<head>
</head>
<body>
<canvas id="colorPicker" οnmοusemοve="showCurrentColor(event)">
</canvas>
<br/>
<div id="textResult">
</div>
<script type="text/javascript">
if(document.createElement("canvas")){
   if(document.getElementById("colorPicker").getContext){
    var can = document.getElementById("colorPicker");
    can.setAttribute("height",300);
    var cxt = can.getContext("2d");

    var gradient = cxt.createLinearGradient(0.5,0.5,0,150);
    gradient.addColorStop(0,'#00ff00');
    gradient.addColorStop(1,'#ff0000');
    cxt.fillStyle=gradient;
    cxt.fillRect(0,0,60,200);

    var ox= can.offsetLeft
    var oy = can.offsetTop;
    var span = document.createElement("input");
    span.setAttribute("id","rgba");

    document.getElementById("textResult").appendChild(span);

   }
}

function showCurrentColor(e){
  var x = e.clientX - 8;
  var y = e.clientY - 29;
  var w = 10;
  if(document.createElement("canvas")){
   if(document.getElementById("colorPicker").getContext){
    var can = document.getElementById("colorPicker");
    var cxt = can.getContext("2d");
    var gradient = cxt.createLinearGradient(0.5,0.5,0,150);
    var span = document.getElementById("rgba");
    var imgDatas = cxt.getImageData(ox,oy,10,200);
    var imgData = imgDatas.data;
    var g = imgData[4 *(w)*(y)+(x)*4 + 1];
    var r = imgData[4 *(w)*(y)+(x)*4];
    var b = imgData[4 *(w)*(y)+(x)*4 + 2];
    var a = imgData[4 *(w)*(y)+(x)*4 + 3];
    span.value="r="+r+" g="+ g+" b="+b +" a="+a;
    document.getElementById("textResult").appendChild(span);

   }
  }