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. 一个很奇怪的重复链接lib的问题

    早上在调一个程序的时候感觉非常奇怪,就是数据在初始化的时候会失败,后来发现是获取一个数据的时候出错了 假设我们又一个config.lib,sql.dll和main.exe 因为数据库在打开数据库的时候 ...

  2. duplicate symbols for architecture armv7解决办法

    XCODE编译的时候报错:duplicate symbols for architecture armv7   1.首先排查是否有名字重复的文件:   2.检查是否在#import头文件的时候,不小心 ...

  3. 用file上传文件时,浏览器返回值总是自动添加<pre>的解决办法

    在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...

  4. 剑指Offer:面试题19——二叉树的镜像(java实现)

    问题描述: 操作给定的二叉树,将其变换为源二叉树的镜像. 二叉树结点定义为: public class TreeNode { int val = 0; TreeNode left = null; Tr ...

  5. UVa10806 Dijkstra,Dijkstra-费用网络流

    Problem, in short Given a weighed, undirected graph, find the shortest path from S to T and back wit ...

  6. 9,SFDC 管理员篇 - 安全设置

    1, 使用Profile控制权限 (整体层面)     Setup | Manage Users | Profiles 总结下,一个用户只能有一个Profile,但是可以有多个Permission S ...

  7. java泛型中的super和extend

    List<? extend Fruit> list=new ArrayList<>();  解释为:集合中元素是继承自Fruit,究竟是何种类型,编译器也无法判定. 如果要从集 ...

  8. MessageFormat不支持{

    转自 :http://zqc-0101.iteye.com/blog/1140140 MessageFormat用来格式化一个消息,通常是一个字符串,比如: String str = "I' ...

  9. C#通过安全证书生成签名和验签辅助类

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  10. Loadrunner:LR提交JSON格式的POST请求

    场景: 影视分发:影院客户端向管理平台发起取任务的操作,取任务接口getDispatchTask,为JSON格式的POST请求 Action() { web_custom_request(" ...