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. C# using 三种使用方式

    http://www.cnblogs.com/fashui/archive/2011/09/29/2195061.html 1.using指令. using 命名空间名字.例如: using Syst ...

  2. 最小的K个数:用快排的思想去解相关问题

    实现快速排序算法的关键在于先在数组中选择一个数字,接下来把数组中的数字分为两部分,比选择的数字小的数字移到数组的左边,比选择的数字大的数字移到数组的右边. 这个函数可以如下实现: int Partit ...

  3. oracle10g在rh6上安装缺少libXtst*的包导致不能出OUI

    由于测试需要,今天在linux6.0上装了下oracle10g,确实是知道oracle10g已经不支持redhat5.0以后的版本了,但是根据自己以往在redhat5.0上装oracle的经验就鲁莽下 ...

  4. 创建eclipse针对NDK的联合编译环境。

    警告, 这篇文章是老的配置方式, 随着goolge工具的完善,有了更高级的配置方式,参考文章: 1.http://jingyan.baidu.com/article/3ea51489e7a9bd52e ...

  5. Mysql备份迁移——MySqlBackup(.net)——(无法解决视图嵌视图报错)

    这里是利用MySqlBackup,可以再nuget中下载. 无法解决视图嵌视图报错的问题,只导表跟数据比较合适,如果有视图嵌视图,请参照Mysql备份迁移——Mysqldump(.NET调用Mysql ...

  6. MSSQL导入导出数据

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

  7. AngularJs 简单实现全选,多选操作

    很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...

  8. jdbc中c3p0的配置信息

    <c3p0-config> <!-- 这是默认配置信息 --> <default-config> <!-- 连接四大参数配置 --> <prope ...

  9. Timeout expired. The timeout period elapsed prior to completion of the operation or the server is not responding.

    今天碰到了一个查询异常问题,上网查了一下,感谢原创和译者 如果你使用的数据库连接类是 the Data Access Application Blocks "SqlHelper" ...

  10. java并发编程_CountDownLanch(倒计数锁存器)应用场景

    使用介绍: 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在 ...