html5 学习简单的拾色器


Posted in HTML / CSS onSeptember 03, 2010

下面是源码 需要浏览器支持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>
HTML / CSS 相关文章推荐
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 #HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 #HTML / CSS
用HTML5.0制作网页的教程
May 30 #HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 #HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 #HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 #HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 #HTML / CSS
You might like
Terran兵种介绍
2020/03/14 星际争霸
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
php生成图片验证码
2015/06/09 PHP
前端必学之PHP语法基础
2016/01/01 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
理解javascript对象继承
2016/04/17 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python查看微信撤回消息代码
2018/06/07 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python实现微信防撤回神器
2019/04/29 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
戴尔美国官网:Dell
2016/08/31 全球购物
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
运动会广播稿50字
2014/01/26 职场文书
重阳节活动总结
2014/08/27 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
python实现简单反弹球游戏
2021/04/12 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python