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 相关文章推荐
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
Python绘制七段数码管实例代码
2017/12/20 Python
如何利用python查找电脑文件
2018/04/27 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
css3学习心得分享
2013/08/19 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
校园文明标语
2014/06/13 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
材料采购员岗位职责
2015/04/03 职场文书
户外亲子活动总结
2015/05/08 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书