博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5中canvas的使用 获取鼠标点击页面上某点的RGB
阅读量:5860 次
发布时间:2019-06-19

本文共 1517 字,大约阅读时间需要 5 分钟。

1.html5中的canvas在IE9中可以跑起来。在IE8则跑不起来,这时候就需要一些东西了。

我推荐这种方法,这样显得代码不乱。

需要谷歌的一个html5.js的文件即可。

注意:必须插入在<head></head>之间才会有效。由于HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

article,aside,dialog,footer,header,section,footer,nav,figure,menu    {       display:block    }

这时候页面支持canvas画布,第一步已经完成了!

2.然后我们需要在画布上画出一块区域,用来放置我们的图片,以便我们去获取图片上的RGB。

将图片放置到画布上

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    };}//这是调用事件οnclick="alert('X:'+mousePosition(event).x+'Y:'+mousePosition(event).y)

 

每次点击将获取的X,Y作为参数传递到getImageData(参数1,参数2,参数3,参数4),参数1与参数2上即可。

至于具体的getImageData()用法以及参数含义我就不在这唠叨了,帮助文档都有。

这是一个手写的小取色功能,挺好玩。

//项目里面还需要对图片进行同步放缩 以及同步移动  类似一个软件做的有点复杂 

转载:http://www.cnblogs.com/zqzjs/p/4423246.html

你可能感兴趣的文章
Duplicate Symbol链接错误的原因总结和解决方法[转]
查看>>
适配器模式
查看>>
刨根问底区块链 —— 基础篇
查看>>
php 直接调用svn命令
查看>>
建立低权限的ftp帐号
查看>>
htpasswd
查看>>
Android窗口机制(三)Window和WindowManager的创建与Activity
查看>>
Android 编译出错解决
查看>>
iOS--The request was denied by service delegate (SBMainWorkspace) for reason:
查看>>
Android 打开WIFI并快速获取WIFI的信息
查看>>
Spring boot 入门篇
查看>>
linux设备驱动第三篇:写一个简单的字符设备驱动
查看>>
【IOS开发】GDataXML解析XML
查看>>
Iptables
查看>>
session监听在线用户
查看>>
我的友情链接
查看>>
Flaapy Bird项目笔记
查看>>
GridView多行多列合并单元格(指定列合并)
查看>>
什么是DDOS攻击?怎么防御?
查看>>
hive0.11 hiveserver custom认证bug
查看>>