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实现预加载动画效果
Sep 06 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php实现插入排序
2015/03/29 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
js转html实体的方法
2016/09/27 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
js微信分享实现代码
2020/10/11 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
医学类个人求职信范文
2014/02/05 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书