html5 isPointInPath相关操作
<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相关操作的更多相关文章
- Html5多媒体相关的API---video
Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...
- HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- 从零自学Hadoop(20)：HBase数据模型相关操作上
阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- 从零自学Hadoop(21)：HBase数据模型相关操作下
阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- 理解CSV文件以及ABAP中的相关操作
在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...
- Liunx下的有关于tomcat的相关操作 && Liunx 常用指令
先记录以下liunx下的有关于tomcat的相关操作 查看tomcat进程: ps-ef|grep java (回车) 停止tomcat进程: kill -9 PID (进程号如77447) (回车) ...
- pip的相关操作
>Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...
- python操作mysql数据库的相关操作实例
python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...
- php对二维数组进行相关操作（排序、转换、去空白等）
php对二维数组进行相关操作(排序.转换.去空白等) 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-11-04 这篇文章主要介绍了php对二维数组进行相关操作,包括php对 ...
随机推荐
- java入门---对象和类&概念详解&实例
Java作为一种面向对象语言.支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 重载 这篇文章,我们主要来看下: 对象:对象是类的一个实例(对象不是找个女朋友),有状态 ...
- [Real World Haskell翻译]第20章 Haskell系统编程
第20章 Haskell系统编程 到目前为止,我们已经讨论了大多数的高层次的概念.Haskell也可以用于较低级别的系统编程.很可能是用haskell编写出底层的与操作系统接口的程序. 在本章中,我们 ...
- 20145202马超《java》实验5
两人一组结对编程: 参考http://www.cnblogs.com/rocedu/p/6766748.html#SECDSA 结对实现中缀表达式转后缀表达式的功能 MyBC.java 结对实现从上面 ...
- Prism for WPF 搭建一个简单的模块化开发框架（三） 给TreeView加样式做成菜单
原文:Prism for WPF 搭建一个简单的模块化开发框架(三) 给TreeView加样式做成菜单 昨天晚上把TreeView的样式做了一下,今天给TreeView绑了数据,实现了切换页面功能 上 ...
- ONTAK 2010 aut
Autostrady https://szkopul.edu.pl/problemset/problem/f2dSBM7JteWHqtmVejMWe1bW/site/?key=statement 题意 ...
- 11gR2RAC更换CRS磁盘组文档
磁盘(pv)准备 在生产环境中,提前从存储上划分一些磁盘挂载到RAC系统的两个节点上(node1,node2). 新增加磁盘组为(hdisk14--hdisk24) 1.1磁盘使用规划 ...
- mysql5.6 无法远程连接问题解决
需要配置mysql5.6版本的my.cnf文件,我的my.cnf文件配置如下: port=3306是我后来自己加上的.加上这个之后重启mysql service mysqld restart 记得给r ...
- 通过批处理命令for提取数据
前两天有这么个小需求: 在cmd中运行某测试工具后,会返回一个json结果,其中有一个参数的值每次都变且经常要用,正常情况复制粘贴就好了,但这个值非常长,配上cmd的标记+粘贴的行为,就很酸爽了.然后 ...
- 关于自学C语言开始时应该注意的问题分享—未完待续......
---恢复内容开始--- 自学C语言编程总结 第1章C语言概述 1. 如果用户将主函数的返回值类型定义为了void,则不需要返回任何值: 2. C语言的基本结构包括主函数和程序体两部分 ...
- Struts2(八.添加用户多张照片实现文件上传功能)
1.modify.jsp 在modify.jsp修改用户信息页面实现文件上传,添加用户照片的功能 如果是文件上传,method必须是post,必须指定enctype <form method=& ...