主页 > 知识库 > html5 学习简单的拾色器

html5 学习简单的拾色器

热门标签:江苏高频外呼系统线路 会声会影怎样做地图标注效果 高德地图标注错误怎么修改 地图标注自己去过的地方 标准智能外呼系统 平顶山电子地图标注怎么修改 电销机器人视频 洛阳市伊川县地图标注中心官网 搜狗星级酒店地图标注
下面是源码 需要浏览器支持html5

复制代码
代码如下:

<html>
<head>
</head>
<body>
<canvas id="colorPicker" onmousemove="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);
}
}
}
</script>
</body>
</html>

标签:果洛 蚌埠 松原 鄂尔多斯 阿克苏 广西 常德 广东

巨人网络通讯声明:本文标题《html5 学习简单的拾色器》,本文关键词  html5,学习,简单,的,拾色,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《html5 学习简单的拾色器》相关的同类信息!
  • 本页收集关于html5 学习简单的拾色器的相关信息资讯供网民参考!
  • 推荐文章