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对 ...
随机推荐
- GeekOS: 一、构建基于Ubuntu9.04的实验环境
参考:http://www.cnblogs.com/wuchang/archive/2009/05/05/1450311.html 补充:在最后步骤中,执行bochs即可弹出运行窗口
- linux怎么把英文版火狐浏览器改成中文
一.按alt打开菜单栏,点击help>about firefox查看自己的火狐浏览器版本 比如我的是52.4.0版本 二打开网址 http://ftp.mozilla.org/pub/firef ...
- Homebrew安装Redis找不到redis.conf文件
使用Homebrew安装redis完成后,使用命令 redis-server 启动redis,如下图所示: 启动信息中存在一条警告信息:没有指定的配置文件 然而在安装目录中并没有发现redis.con ...
- springboot与activemq的使用
1.springboot和activemq的使用相对来说比较方便了,我在网上看了很多其他的资料,但是自己写出来总是有点问题所以,这里重点描述一下遇到的一些问题. 2.至于activemq的搭建和spr ...
- Android Preference 设置偏好全攻略
Android 设置是每个App必不可小的东西,看似很简单,但是初学不熟悉的很花时间去研究,特别样式兼容方面,以及有自定义设置的需求,下面是对用法做一个总结 Preference结构 界面结构看下图 ...
- photoshop cc 2018安装破解教程（破解补丁，亲测，绝对可用）
破解步骤说明:下载地址百度网盘,https://pan.baidu.com/s/1cWtpUesl2fms3tFwEC0MiQ 1.右键解压Adobe Photoshop CC 2018 64位这个文 ...
- 百度地图标注及结合ECharts图谱数据可视化
本示例中根据企业位置经纬度,在页面右侧百度地图中标注企业名称.同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本.当右侧百度地图缩放拖拽,左侧ECharts图谱根据右侧地图上出现的企业动态 ...
- 180706-BigDecimal除法的精度问题
BigDecimal除法的精度问题 在使用BigDecimal的除法时,遇到一个鬼畜的问题,本以为的精度计算,结果使用返回0,当然最终发现还是自己的使用姿势不对导致的,因此记录一下,避免后面重蹈覆辙 ...
- 第二篇 CSS快速入门
学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签——CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style ...
- 树和二叉树 -数据结构（C语言实现）
读数据结构与算法分析 树的概念 一棵树是一些节点的集合,可以为空 由称做根(root)的节点以及0个或多个非空子树组成,子树都被一条来自根的有向边相连 树的实现 思路 孩子兄弟表示法:树中的每个节点中 ...