canvas的事件只能监听在canvas标签上,而不嗯那个想其他dom元素那样,所以针对canvas里面的图形监听事件是比较麻烦的。

通过isPointInPath(x,y);  这个方法用于判断某一点的坐标是否在最新绘制的图形内。用法如下:

oC.onmousedown = function(ev){
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop; if( oGC.isPointInPath(x,y) ){
alert(123);
}
};

不过这个方法只能判断某点是不是在最新绘制的图形内,所以每次判断,都是要判断的图形重绘。

有一个好用的canvas库,http://jcscript.com/

里面提供了很多方法绘图和事件操作。例如:

jc.start('c1',true);  

    jc.circle(100,100,50,'#ff0000',1).click(function(){
alert(123);
});
jc.start('c1');

canvas事件的更多相关文章

  1. Canvas事件绑定

    canvas事件绑定 众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等.那我们想给canvas里的某一张图片添加一个点击事件该怎么做到.而js只能监听到canv ...

  2. canvas 事件绑定

    Canvas事件绑定   canvas事件绑定 众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等.那我们想给canvas里的某一张图片添加一个点击事件该怎么做到 ...

  3. (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 五子棋游戏 canvas 事件 边界检测

    //有一定基础的人才能看得懂 <!doctype html><html lang="en"> <head> <meta charset=& ...

  6. canvas 动态画线

    <!--实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,用到的事件有mousedown mousemove mouseup用的的canvas api 有 beginPath moveTo l ...

  7. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  8. HTML5 Canvas 的事件处理---转

    DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到.比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行 ...

  9. 兼容小程序的canvas画图组件jmGraph

    基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...

随机推荐

  1. shell终极操作

    1.安装zsh Mac : 直接看下一节 Redhat/centos :sudo yum install zsh Ubuntu :sudo apt-get install zsh 2.安装oh my ...

  2. php接收到的json格式不标准,某个字段中的文本包含双引号的处理

    $str = '[{"Count":"1789"},{"裁判要旨段原文":"本瑶","案件类型":& ...

  3. chrome常用配置

    插件类: Gestures for Google Chrome 增加鼠标手势 安装后需重启 JSONView 自动格式化页面输出的json数据

  4. Asp.net MVC中 Controller 与 View之间的数据传递

    在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用 ...

  5. Hadoop学习18--yarn配置篇-基本配置节点

    <configuration> <property> <name>yarn.nodemanager.aux-services</name> <va ...

  6. gerrit 解决中文乱码相关配置(转载)

    From:http://www.cnblogs.com/Jerryshome/archive/2012/04/19/2457170.html 计划在团队中采用code review,因为一直是用git ...

  7. 【Python与机器学习】:利用Keras进行多类分类

    多类分类问题本质上可以分解为多个二分类问题,而解决二分类问题的方法有很多.这里我们利用Keras机器学习框架中的ANN(artificial neural network)来解决多分类问题.这里我们采 ...

  8. svn 提交失败

    刚刚使用SVN 提交代码时提示失败. svn: Commit failed (details follow):svn: Can't open file '/home/svn/project/db/tx ...

  9. Blackfin DSP(七):用SPORT口模拟SPI

    1.问题的提出 当系统从SPI device启动时,若SCLK = 133M,则SPI的最大速度为33M.然而,有一些串行的flash设备能更快的运行,因此,如果我们使用SPORT口,它的最大速度为S ...

  10. FPGA奇数分频

    在FPGA设计中,分频是很常用的一个基本功能,一般来说,如果需要偶数分频即2次幂的整数倍,这个就很简单了,如2.4.8.16.32.64等这些以2的整数倍的. 这里说的是奇数倍分频,如时钟是100MH ...