最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Html5 Canva中绘制的元素添加鼠标事件实例教程
时间:2015-08-19 编辑:简简单单 来源:一聚教程网
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
使用Html5的时候,在Canvas上绘制的东西是不能相应鼠标事件的,但是使用jTopo添加事件非常简单,效果如下:
代码示例:
var node = new JTopo.Node("Hello"); node.setLocation(409, 269); node.mousedown(function(event){ if(event.button == 2){ node.text = '按下右键'; }else if(event.button == 1){ node.text = '按下中键'; }else if(event.button == 0){ node.text = '按下左键'; } }); node.mouseup(function(event){ if(event.button == 2){ node.text = '松开右键'; }else if(event.button == 1){ node.text = '松开中键'; }else if(event.button == 0){ node.text = '松开左键'; } }); node.click(function(event){ console.log("单击"); }); node.dbclick(function(event){ console.log("双击"); }); node.mousedrag(function(event){ console.log("拖拽"); }); node.mouseover(function(event){ console.log("mouseover"); }); node.mousemove(function(event){ console.log("mousemove"); }); node.mouseout(function(event){ console.log("mouseout"); });
实例二
问:用HTML5的canvas画的一个图,如何添加鼠标事件(如:移入,点击),感谢各位的指点!
回答一:
面向对象就可以
一个是你找找对象化的canvas框架 比如canvasjs
一个是你自己写对象结构
简单说你canvas里面所有画的元素都是对象 比如那个 圆圈 比如那个线条
每个对象都要 实现 鼠标事件 mouseon 等等 每个对象要知道自己的坐标和大小(矩形大小)
但是怎么触发? 在canvas上绑定所有鼠标事件 然后 检查坐标看那个对象被触及了 然后调用该对象 相应的鼠标事件
回答二:
不是给图形添加鼠标事件,而是在鼠标事件中判断鼠标下是哪个图形。如
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31