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实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
php分页函数
2006/07/08 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
javascript document.images实例
2008/05/27 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python uuid模块使用实例
2015/04/08 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
大学新生欢迎词
2014/01/10 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
春节晚会开场白
2015/05/29 职场文书
话题作文之诚信
2019/11/28 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang