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对 ...
随机推荐
- 一个 lambda 表达式引起的思考
一个 lambda表达式 引起的思考 fun = [lambda x: x*i for i in range(4)] for item in fun: print(item(1)) 全文都是抄来 ...
- 天津Uber优步司机奖励政策（12月28日到12月29日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- SQL计算出百分比
有clients和lead_sources俩表.mysql数据库. lead_sources表结构类似: clients表中的lead_source_id是外键.现在要统计某时间段内client内每种 ...
- hdu6027Easy Summation(快速幂取模)
Easy Summation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- Qt-事件处理-鼠标事件
根据书中的内容,简单的实现鼠标相关的内容 源代码如下 .h #ifndef MOUSEEVENT_H #define MOUSEEVENT_H #include <QMainWindow> ...
- java实现网页截图
使用工具 java+selenium+phantomjs /chromedriver /firefox 1.分别是 phantomjs插件 google截图插件 和 firefox火狐浏览器截图插件2 ...
- mysql数据库常用操作
目前最流行的数据库: oracle.mysql.sqlserver.db2.sqline --:单行注释 #:也是单行注释 /* 注释内容*/:多行注释 mysql -uroot -p密码:登录mys ...
- 【C#】ArcFace2 视频人脸比对教程
请允许我大言不惭,叫做教程,特希望各位能指正.哦,我用的是vs2017.了解更多详情可以访问虹软人工智能开放平台 一.准备工作 1.创建项目 2.添加EMGU.CV包 ,并设属性“复制到输出目录”为“ ...
- 聊聊、dubbo 找不到 dubbo.xsd 报错
平常在用 Dubbo 的时候,创建 xml 会提示 http://code.alibabatech.com/schema/dubbo/dubbo.xsd 找不到. 大家可以去 https://gith ...
- TensorFlow | ReluGrad input is not finite. Tensor had NaN values
问题的出现 Question 这个问题是我基于TensorFlow使用CNN训练MNIST数据集的时候遇到的.关键的相关代码是以下这部分: cross_entropy = -tf.reduce_sum ...