<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. browser-cookies 一个管理cookies的插件，好用

    一.browser-cookies 地址:https://github.com/voltace/browser-cookies 用法 存放cookies是 cookies.set('firstName ...

  2. mybatis入门(二):增删改查

    mybatis的原理: 1.mybatis是一个持久层框架,是apache下的顶级项目 mybatis托管到googlecode下,目前托管到了github下面 2.mybatis可以将向prepar ...

  3. 20145234黄斐《Java程序设计》第八周学习总结

    教材学习内容总结 第十五章部分 - 通用API 通用API 日志: 日志对信息安全意义重大,审计.取证.入侵检测等都会用到日志信息 日志API Logger: 注意无法使用构造方法生成Logger对象 ...

  4. 【NIS】深入了解NIS

    1  简介 NIS( NetworkInformation Service)提供了一个网络黄页的功能,当用户登录系统时,Linux系统会到NIS主机上去寻找用户使用的帐号密码信息加以比对,以提供用户登 ...

  5. 韩国KT软件NB-IOT开发记录V150（2）FOTA差分包生成

    1. 生成差分包

  6. python 水仙花

    #简单def narcissus(): for n in range(100, 1000, 1): a, b, c = n//100, (n//10)%10, (n%100)%10 if a ** 3 ...

  7. Spring全局变量

    压测spring框架的webservice接口,大并发量下响应值与预期值不一致 经查,开发在类中使用全局变量导致: springmvc核心控制器DispatcherServlet 默认为每个contr ...

  8. python学习笔记03 --------------程序交互与格式化输出

    1.读取用户输入内容 语法:input() 例: name = input('你的名字是?) print('你好'+name) 程序会等待用户输入名字后打印:你好(用户输入的名字) 注意:input接 ...

  9. hdu刷题2

    hdu1021 给n,看费波纳列数能否被3整除 算是找规律吧,以后碰到这种题就打打表找找规律吧 #include <stdio.h> int main(void) { int n; whi ...

  10. ionic LoadingController 模块使用

    html 代码: <ion-header> <ion-navbar> <ion-title>Loading</ion-title> </ion-n ...