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. Datagridview 添加checkbox列,并判断Datagridview 中的checkbox列是否被选中

    Solution1://In Fill DataGridViewEvent : DataGridViewCheckBoxColumn ChCol = new DataGridViewCheckBoxC ...

  2. Linux查看系统资源使用情况(转)

    概述: 用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O ...

  3. 怎样避免 i f 判断过多,全复杂度较高,代码不美观的问题?

    没有什么好的设计方式可以实现,减少一个方法中出现几十个 if 匹配的判断? 现在要做一个判断客户是否通过验证的接口. 一共有30多个验证规则的判断, 每个规则对应一个规则号: 这个接口只需要返回是否验 ...

  4. 今年几个项目中用到的一个jqueryTab插件感觉挺好用的

    名字叫:wdscrolltab 开源中国项目地址: http://www.oschina.net/p/wdscrolltab

  5. MSSQL导入导出数据

    /******* 导出到excel */ EXEC master..xp_cmdshell 'bcp SettleDB.dbo.shanghu out c:\temp1.xls -c -q -S&qu ...

  6. JQ怎么获取margin-left的值

    var margin =$("#Modules .list").css('marginLeft');

  7. 关于oracle中to_char和to_date的用法

      一.24小时的形式显示出来要用HH24 select to_char(sysdate,'yyyy-MM-dd HH24:mi:ss') from dual; select to_date('200 ...

  8. 按钮的Default Button属性

    如果在窗体上放置一个文本输入框,放置一个按钮,并将按钮default属性设置为True,那么在文本输入框获是焦点时输入Enter键,回车,自动相当于点击按钮.一个窗口只能有一个默认按钮. 这样按回车就 ...

  9. 建议Javascript以后都用严格模式

    建议以后都在js文件的头部加上 "use strict"; 现在主流的浏览器都支持,不支持的浏览器也会忽略掉. 可以使我们写的更规范,可控: 有些错误编译的时候就会出现,方便排错:

  10. Python之路【第十五篇】:Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...