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. WeX5之xid相关API

    WeX5针对xid提供了以下js api: 1.根据xid获取id:this.getIDByXID(xid): 2.根据xid获取HTML节点:this.getElementByXid(xid),此a ...

  2. Hadoop学习13--zookeeper相关

    zookeeper要保证各个server之间同步,实现同步的协议是zab协议.此协议有两种模式:恢复模式(选主)和广播模式(同步). 服务启动或者leader崩溃时,进入恢复模式.选举成功且大多数se ...

  3. Android学习笔记(二)

    Google在Android4.0之后加入了Action Bar的功能.但是有时候标题栏会相当占用屏幕空间,使得内容区域变小,这里演示如何隐藏标题栏. 隐藏标题栏的方法很简单,打开上节的FirstAc ...

  4. GC之七--gc日志分析工具

    性能测试排查定位问题,分析调优过程中,会遇到要分析gc日志,人肉分析gc日志有时比较困难,相关图形化或命令行工具可以有效地帮助辅助分析. Gc日志参数 通过在tomcat启动脚本中添加相关参数生成gc ...

  5. 第三周psp

    12号 类别c 内容c 开始时间s 结束e 中断I 净时间T 结对项目 查资料 8:40 11:22 25m 137m 结对项目 修改代码 12:10 12:40 0m 30m 结对项目 修改代码 1 ...

  6. assembly打包。

    --排除 <?xml version="1.0" encoding="UTF-8"?><assembly    xmlns="htt ...

  7. css之让文字在一定范围内显示,不超过固定的宽度和高度

  8. web开发-给即将毕业实习生的一点面试经验

    简历投递: 智联招聘51job 像赶集网和58同城最好别去投 面试的公司,特别是深圳这边,面试的时候公司小,很多人,八九不离十是那种搞培训的,很多时候,有些公司会主动打电话来教你去面试,这些绝大多数也 ...

  9. OpenSSL命令系列

    1.1 ssl命令系列前言 openssl命令的格式是"openssl command command-options args",command部分有很多种命令,这些命令需要依赖 ...

  10. delegate事件绑定

    为了代码的健壮性,绑定事件之前先解绑再进行绑定. var _$div = $("#id");_$div.undelegate("click mouseover mouse ...