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的更多相关文章

  1. H5_0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

  2. Listbox与dataGridView的获取鼠标点击事件的区别！！！

    lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! DataGridViewRow currenRow = this.dgvxian3.Rows[ind ...

  3. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  4. unity中让物体移动到鼠标点击地面任一点的位置（单击移动和双击暂停移动）并生成图标

    using UnityEngine; using System.Collections.Generic; using UnityEngine.EventSystems; using UnityEngi ...

  5. unity中让摄像机移动到鼠标点击的位置和鼠标控制平移视角

    private Vector3 targetVector3; private float movespeed=0.5f; private bool IsOver = true; private Gam ...

  6. JavaScript 获取鼠标点击位置坐标

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  7. HTML5中Canvas概述

    一.HTML5 Canvas历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若 ...

  8. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  9. 获取鼠标点击相对于Canva位置的2种方法

    如果给Canvas添加 onmousedown事件,获取到的鼠标位置都是相对于当前文档的位置(x,y):

随机推荐

  1. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  2. 前端学HTTP之web攻击技术

    前面的话 简单的HTTP协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击的对象.应用HTTP协议的服务器和客户端,以及运行在服务器上的Web应用等资源才是攻击目标.本文将详细介绍攻击web站点 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（71）-微信公众平台开发-公众号管理

    系列目录 思维导图 下面我们来看一个思维导图,这样就可以更快了解所需要的功能: 上一节我们利用了一个简单的代码例子,完成了与微信公众号的对话(给公众号发一条信息,并得到回复) 这一节将讲解公众号如何设 ...

  4. 从netty-example分析Netty组件续

    上文我们从netty-example的Discard服务器端示例分析了netty的组件,今天我们从另一个简单的示例Echo客户端分析一下上个示例中没有出现的netty组件. 1. 服务端的连接处理,读 ...

  5. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  6. C#中Length和Count的区别（个人观点）

    这篇文章将会很短...短到比你的JJ还短,当然开玩笑了.网上有说过Length和count的区别,都是很含糊的,我没有发现有 文章说得比较透彻的,所以,虽然这篇文章很短,我还是希望能留在首页,听听大家 ...

  7. Spring的数据库开发

                                Spring JDBC框架操作mysql数据库 Spring中的JDBC为我们省去连接和关闭数据库的代码,我们着重关注对数据库的操作.Sprin ...

  8. 餐饮连锁公司IT信息化解决方案一

             从餐饮企业的信息化需求来说,没有哪一种解决方案能满足所有餐饮企业的信息化建设需要.不同的餐饮业态有不同的业务流程,不同业态的信息化解决方案是目前餐饮企业信息化建设急需的,这种一站式整 ...

  9. Flyweight(享元模式)

    import java.util.Hashtable; /** * 享元模式 * @author TMAC-J * 享元模式一般和工厂模式一起使用,但此处为了更好说明,只用享元模式 * 定义:享元模式 ...

  10. linux-linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...