HTML5 Canvas 绘图方法整理 【十五、Canvas页面交互: 鼠标事件 】
16lz
2021-01-22
在Canvas中 鼠标事件分为以下三种:
1、鼠标按下 : mousedown
2、鼠标松开 : mouseup;
3、鼠标移动 : mousemove
一般需要用到与鼠标有关系的交互 都离不开这三种,例如常用的拖拽、移动、获取当前位置信息等;
不过这里需要知道是的,Canvas 的一些复杂操作都是JavaScript的语法,利用JS来实现的功能,并不是Canvas 自己本身的。
举一个简单的例子:
获取鼠标按下时的坐标点:
<script> window.onload=function(){ let cans = document.getElementById("myCanvas"); let ctx = cans.getContext("2d"); let mouse=tools.getMouse(cans); cans.addEventListener("mousedown",function(){ console.log("当前坐标为:"+mouse.x+ ","+mouse.y); },false); } </script>
效果图:
之前的代码引入了一个tool.js 的一个文件,里面代码属于JavaScript范畴,在这里就不多解释了,直接复制过来:
window.tools.getMouse=function(element){
var mouse={x:0,y:0};
addEvent(element,"mousemove",function(e){
var x, y;
//在IE中 event对象是作为window对象的一个属性存在
var e= e || window.event;
//兼容做到ie9
if(e.pageX || e.pageY){
x=e.pageX;
y=e.pageY;
}else{
x=e.clientX+document.body.scrollLeft || document.documentElement.scrollLeft;
y=e.clientY+document.body.scrollTop || document.documentElement.scrollTop;
}
x-=element.offsetLeft;
y-=element.offsetTop;
mouse.x=x;
mouse.y=y;
});
return mouse;
};
更多相关文章
- html5 css3 背景视频循环播放代码
- HTML5 标签audio添加网页背景音乐代码
- 我无法理解为什么我的代码中的单击选择文本
- js字符串与html代码互相转换时怪想法:自己解析js字符串成普通字
- 解决FCKEditor编辑器在浏览器返回时显示html源代码的问题
- 高分求:如何解析IdHTTP获得的http代码?用mshttp的IHTMLDocument2可
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原
- HTML显示日期时间代码 - [js 特效代码]
- 解决html代码中插入的图片在浏览器中不显示的办法