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对 ...
随机推荐
- ubuntu安装cuda、cudnn
环境: Ubuntu 16.04.4 LTS CUDA:8.0 CUDNN:5.1 CUDA下载:https://developer.nvidia.com/cuda-80-ga2-download-a ...
- shell之lvm
#!/bin/bash #this script for LVM echo "Initial a disk..." echo -e "\033[31mWarning: ...
- BZOJ4300_绝世好题_KEY
题目传送门 刚开始是看到这道题目还以为是序列连续的. 当然了,序列可以不连续. 设f[i]表示到第i位时的序列的最长长度. 取cnt=Max f[j]+1,然后转移回去使f[j]=cnt. 这是为了让 ...
- 【BZOJ4818】序列计数（动态规划，生成函数）
[BZOJ4818]序列计数(生成函数) 题面 BZOJ 题解 显然是求一个多项式的若干次方,并且是循环卷积 或者说他是一个\(dp\)也没有问题 发现项数很少,直接暴力乘就行了(\(FFT\)可能还 ...
- MySql慢查询日志——开启/查看/删除
1,开启慢查询日志 修改mysql.ini文件,加入如下配置: [mysqld] log-slow-queries=H:\mysql_log\slow_query.log long-query-tim ...
- KubeCon深度洞察 | KubeEdge开源首秀
以下内容根据华为云DJ在KubeCon Shanghai Demo Session演讲实录整理而成. KubeEdge Demo Show 11月15日上午Huawei宣布了KubeEdge项目开源, ...
- 「日常训练&知识学习」树的分块（王室联邦，HYSBZ-1086）
题意与分析 这题的题意就是树分块,更具体的看题目(中文题). 学习这一题是为了树的分块,为树上莫队做铺垫. 参考1:https://blog.csdn.net/LJH_KOQI/article/det ...
- poj3984迷宫问题(dfs+stack)
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 35426 Accepted: 20088 Descriptio ...
- Qt-第一个QML程序-2-关键代码分析，TEXT，Image，Mouseare
qml语言开始写的时候有点不习惯,后面用的多了感觉很好,很顺手,用于快速搭建项目界面,真的很好. 目前用到的还是比较简单的 隐藏标题栏,而依附任务栏 flags: Qt.Window | Qt.Fra ...
- lintcode 466. 链表节点计数
466. 链表节点计数 计算链表中有多少个节点. 样例 给出 1->3->5, 返回 3. /** * Definition of ListNode * class ListNode ...