html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来。在IE8则跑不起来，这时候就需要一些东西了。
我推荐这种方法，这样显得代码不乱。
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
需要谷歌的一个html5.js的文件即可。
注意：必须插入在<head></head>之间才会有效。由于HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
article,aside,dialog,footer,header,section,footer,nav,figure,menu
{
display:block
}
这时候页面支持canvas画布，第一步已经完成了！
2.然后我们需要在画布上画出一块区域，用来放置我们的图片，以便我们去获取图片上的RGB。
<canvas width:="300px" height="200px" id="canv"></canvas>
<script type="text/javascript">
var ctx=document.getElementById('myCanvas').canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.rect(0,0,80,100);
</script>
将图片放置到画布上
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill()
//这些代码都在帮助文档有 根本不必去网上搜
3.我们需要利用canvas的一个方法了，getImageData() 这个方法可以获得到画布上的RGB以及灰度。(指定矩形的像素数据)
var imgData=ctx.getImageData(X,Y,50,50);
//getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
var red=imgData.data[0];
var green=imgData.data[1];
var blue=imgData.data[2];
var alpha=imgData.data[3];
4.获取鼠标点击所在点的坐标
function mousePosition(e)
{
if(e.pageX && e.pageY)
{
return {
x : e.pageX,
y : e.pageY
};
}
var scrollElem = (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
return {
x: e.clientX + scrollElem.scrollLeft,
y: e.clientY + scrollElem.scrollTop
};
} //这是调用事件
onclick="alert('X：'+mousePosition(event).x+'Y：'+mousePosition(event).y)
每次点击将获取的X,Y作为参数传递到getImageData(参数1,参数2,参数3,参数4)，参数1与参数2上即可。
至于具体的getImageData()用法以及参数含义我就不在这唠叨了，帮助文档都有。
这是一个手写的小取色功能，挺好玩。
//项目里面还需要对图片进行同步放缩 以及同步移动 类似一个软件做的有点复杂
html5中canvas的使用 获取鼠标点击页面上某点的RGB的更多相关文章
- H5_0009：关于HTML5中Canvas的宽、高设置问题
关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一: <canvas widt ...
- Listbox与dataGridView的获取鼠标点击事件的区别！！！
lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! DataGridViewRow currenRow = this.dgvxian3.Rows[ind ...
- js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置
<script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...
- unity中让物体移动到鼠标点击地面任一点的位置（单击移动和双击暂停移动）并生成图标
using UnityEngine; using System.Collections.Generic; using UnityEngine.EventSystems; using UnityEngi ...
- unity中让摄像机移动到鼠标点击的位置和鼠标控制平移视角
private Vector3 targetVector3; private float movespeed=0.5f; private bool IsOver = true; private Gam ...
- JavaScript 获取鼠标点击位置坐标
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- HTML5中Canvas概述
一.HTML5 Canvas历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若 ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 获取鼠标点击相对于Canva位置的2种方法
如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):
随机推荐
- 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程
读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- React使用antd Table生成层级多选组件
一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
- 一起学微软Power BI系列-使用技巧(1)连接Oracle与Mysql数据库
说起Oracle数据库,以前没用过Oracle不知道,但是这1年用Oracle后,发现真的是想狂吐槽,特别是那个.NET驱动和链接字符串,特别奇葩.总归是和其他数据库不一样,标新立异,不知道为何.另外 ...
- Python自然语言处理工具小结
Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...
- 代码的坏味道（21）——中间人(Middle Man)
坏味道--中间人(Middle Man) 特征 如果一个类的作用仅仅是指向另一个类的委托,为什么要存在呢? 问题原因 对象的基本特征之一就是封装:对外部世界隐藏其内部细节.封装往往伴随委托.但是人们可 ...
- C#项目中文件的具体含义
1.Bin 目录 用来存放编译的结果,bin是二进制binary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin ...
- Java开发中的23种设计模式详解
[放弃了原文访问者模式的Demo,自己写了一个新使用场景的Demo,加上了自己的理解] [源码地址:https://github.com/leon66666/DesignPattern] 一.设计模式 ...
- 如何用Java类配置Spring MVC(不通过web.xml和XML方式)
DispatcherServlet是Spring MVC的核心,按照传统方式, 需要把它配置到web.xml中. 我个人比较不喜欢XML配置方式, XML看起来太累, 冗长繁琐. 还好借助于Servl ...
- 移动应用App测试与质量管理一
测试工程师 基于Html的WebApp测试, 现在一些移动App混Html5 HTML5性能测试 兼容性 整理后的脑图 测试招聘 弱化大量技术考察 看重看问题的高度 看重潜力 测试经验 质量管理 专项 ...