<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. Struts2获取Servlet的api的两种方式，解决ParameterAware过时的问题

    servlet API通过ActionContext进行获取 Struts2对HttpServletRequest,HttpSession和ServletContext进行了封装,构造了3个Map对象 ...

  2. mybatis中的resultMap实际作用

    resultMap和resultType在实际的使用上完全可以进行替换,但是resultMap有比resultType更多的一个功能.我们先定义一个简单的resultMap例子 <resultM ...

  3. 成都Uber优步司机奖励政策（2月19日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. ORB-SLAM（十）LoopClosing Sim3求解

    主要参考这篇论文 Horn B K P. Closed-form solution of absolute orientation using unit quaternions[J]. JOSA A, ...

  5. restTemplate访问接口

    后端技术精选 每天推送精选技术好文,涉及Java.python.Linux及MySQL,欢迎关注微信公众号:后端技术精选 随笔 - 52, 文章 - 0, 评论 - 50, 引用 - 0 Spring ...

  6. Appium（Python）驱动手机淘宝App

    请注意操作步骤: 1. 用数据线连接手机, 打开开发者模式, 并赋予相关权限, 并保持不锁屏状态: 2. 启动Appium桌面服务端: 3. 运行程序: 首次运行, Appium会在手机上安装3个Ap ...

  7. idea前端页面不刷新----springboot

    修改这里就好了

  8. JAVA基础:ArrayList和LinkedList区别

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedList ...

  9. 标注点（Labeled Point）

    标注点LabeledPoint是一种带有标签(Label/Response)的本地向量,它可以是稠密或者是稀疏的.在MLlib中,标注点在监督学习算法中被使用.由于标签是用双精度浮点型来存储的,故标注 ...

  10. github 使用“git commit -m"命令时候出现的一个小问题

    git commit -m 使用问题 今天提交文件到github,步骤是: git add abc.py (abc.py是我当前随意写的一个文件名) git commit -m 'add codes ...