canvas事件
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事件的更多相关文章
- Canvas事件绑定
canvas事件绑定 众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等.那我们想给canvas里的某一张图片添加一个点击事件该怎么做到.而js只能监听到canv ...
- canvas 事件绑定
Canvas事件绑定 canvas事件绑定 众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等.那我们想给canvas里的某一张图片添加一个点击事件该怎么做到 ...
- (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 五子棋游戏 canvas 事件 边界检测
//有一定基础的人才能看得懂 <!doctype html><html lang="en"> <head> <meta charset=& ...
- canvas 动态画线
<!--实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,用到的事件有mousedown mousemove mouseup用的的canvas api 有 beginPath moveTo l ...
- wpf样式绑定 行为绑定 事件关联 路由事件实例
代码说明:我要实现一个这样的功能 有三个window窗口 每个窗体有一个label标签 当我修改三个label标签中任意一个字体颜色的时候 其他的label标签字体颜色也变化 首先三个窗体不用 ...
- HTML5 Canvas 的事件处理---转
DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到.比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行 ...
- 兼容小程序的canvas画图组件jmGraph
基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...
随机推荐
- [JBoss] - 在Jboss 7.1 AS中打印hibernate的SQL方法
因为JBoss使用的是log4j,JBoss的系统日志级别默认是INFO.而Hibernate或IBatis要打印SQL,级别为DEBUG,所以,程序设置了log4j级别为DEBUG会被JBoss系统 ...
- EXCEL datatable 根据列名自动写入到相应属性、字段或列中
string path = openFileDialog1.FileName; try { DataTable dt = ExcelHelper.ExcelInput(path); ; ; ; ; i ...
- RESTful API的重磅好伙伴Swagger2
本文将介绍RESTful API的重磅好伙伴Swagger2,它可以轻松的整合到Spring Boot中,并与Spring MVC程序配合组织出强大RESTful API文档. 它既可以减少我们创建文 ...
- bzoj4130: [PA2011]Kangaroos
Description 定义两个区间互相匹配表示这两个区间有交集. 给出长度为N的区间序列A,M次询问,每次询问序列A中最长的连续子序列,使得子序列中的每个区间都与[L,R]互相匹配 N<=50 ...
- windowDialog销毁页面的问题
[结贴] windowDialog销毁页面的问题 [复制链接] Ghost丶 15 主题 91 帖子 200 积分 中级会员 积分 200 发消息 1# 电梯直达 发表于 2015-8- ...
- angular.js ngbind nghtml ngTemplate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- eclipse下tomcat添加部署Module,Web名称与项目名称不一致的解决方法
问题描述: 使用eclipse,因为某种原因项目名称修改后,使用tomcat进行web发布时,选择“Add and Remove Projects...”或双击打开选择Modules选项卡后点击“An ...
- html-css实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- delphi action学习
procedure TEditAction.UpdateTarget(Target: TObject); begin if (Self is TEditCut) then Enabled := (Ge ...
- easyui datagrid 跨页选择
$.fn.extend( memberList ,{ quickSearch : function() { var time1 = new Date(); /* this.datagrid.datag ...