<body>

    <canvas id="c1" width="" height="">

    </canvas>

    <script type="text/javascript">

        var oC = document.getElementById("c1");

        var oGC = oC.getContext("2d");

        var c1 = new Shape(, , );

        var c2 = new Shape(, , );

        oC.onmousedown = function (ev) {

            var ev = ev || window.event;

            var point = {

                x: ev.clientX - oC.offsetLeft,

                y: ev.clientY - oC.offsetTop

            };

            c1.reDraw(point);

            c2.reDraw(point);

        }

        c1.click = function () {

            alert();

        }

        c2.click = function () {

            alert();

        }

        function Shape(x, y, r) {

            this.x = x;

            this.y = y;

            this.r = r;

            oGC.beginPath();

            oGC.arc(x, y, r, ,  * Math.PI / ,false);

            oGC.closePath();

            oGC.fill();

        }

        Shape.prototype.reDraw = function (point) {

            oGC.beginPath();

            oGC.arc(this.x, this.y, this.r, ,  * Math.PI / , false);

            oGC.closePath();

            oGC.fill();

            if (oGC.isPointInPath(point.x, point.y)) {

                this.click();

            }

        }

    </script>

</body>

使用习惯了html中的click等事件，用isPointInPath()这个方法感觉还是很不方便，有没有像jquery那样的方便链式操作，答案是有，有人已经把canvas的事件操作封装成库，这就是jCanvasScript.js。

html5 isPointInPath相关操作的更多相关文章

  1. Html5多媒体相关的API---video

    Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...

  2. HTML5 本地文件操作之FileSystemAPI整理（二）

    一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...

  3. 从零自学Hadoop(20)：HBase数据模型相关操作上

    阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  4. 从零自学Hadoop(21)：HBase数据模型相关操作下

    阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  5. 理解CSV文件以及ABAP中的相关操作

    在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...

  6. Liunx下的有关于tomcat的相关操作 && Liunx 常用指令

    先记录以下liunx下的有关于tomcat的相关操作 查看tomcat进程: ps-ef|grep java (回车) 停止tomcat进程: kill -9 PID (进程号如77447) (回车) ...

  7. pip的相关操作

    >Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...

  8. python操作mysql数据库的相关操作实例

    python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...

  9. php对二维数组进行相关操作（排序、转换、去空白等）

    php对二维数组进行相关操作(排序.转换.去空白等) 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-11-04   这篇文章主要介绍了php对二维数组进行相关操作,包括php对 ...

随机推荐

  1. 20145209刘一阳 《网络对抗》逆向及BOF基础实践

    直接修改程序机器指令,改变程序执行流程 在正式开始实践之前,先对pwn1文件做个备份,以便修改后可以及时恢复到初始状态: 使用指令objdump -d 20145209 | more对目标文件进行反汇 ...

  2. maven私有库搭建

    一.在企业中基本上都会有自己的maven私有库,主要的目的就是方便依赖包的下载.如果采用远程的方式来实现的话,很多时候会考虑网速问题.如果自己活着公司搭建的私有库,这一样在使用上面会效率更高. 二.私 ...

  3. 基于阿里云服务器Linux系统安装配置Redis

    一.Redis简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(有 ...

  4. word record 4

    word record 4 pledge p le g vt. 保证,许诺 snowflake falke->n. 小薄片:火花 deputy de piu ti n. 代理人,代表 etch ...

  5. Siki_Unity_3-13_编程内功修炼-算法

    Unity 3-13 编程内功修炼 -- 算法 任务1&2:课程介绍 主要算法: 分治法 堆排序 二叉树 动态规划 贪心算法 图 任务3:分治算法 -- Divide and Conquer ...

  6. C二维数组行为空，列不为空

    二维数组: 处理二维数组得函数有一处可能不太容易理解:数组的行可以在函数调用时传递,但是数组的列却只能被预置在函数内部. eg: #define COLS 4 int sum(int ar[][COL ...

  7. 剑指offer-包含min函数的栈20

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). class Solution: def __init__(self): self.st ...

  8. POJ 2184 Cow Exhabition

    "Fat and docile, big and dumb, they look so stupid, they aren't much fun..." - Cows with G ...

  9. day21 TFRecord格式转换MNIST并显示

    首先简要介绍了下TFRecord格式以及内部实现protobuf协议,然后基于TFRecord格式,对MNIST数据集转换成TFRecord格式,写入本地磁盘文件,再从磁盘文件读取,通过pyplot模 ...

  10. openstack多region介绍与实践---转

    概念介绍 所谓openstack多region,就是多套openstack共享一个keystone和horizon.每个区域一套openstack环境,可以分布在不同的地理位置,只要网络可达就行.个人 ...