在canvas上通过鼠标左键点击获取几个点(直角坐标),鼠标右键结束点击事件

简介: 代码

代码


// 在canvas上通过鼠标左键点击获取几个点(直角坐标),鼠标右键结束点击事件
 canvasOnclick(){
            // 首先获取canvas的dom
            let cav = document.getElementById("idCanvas");
            let that = this; // 下面如果用箭头函数就不用声明
            // 给画布添加鼠标按下事件 evt.button==0时就是鼠标左键事件 evt.button==1是就是鼠            
            // 标右击事件 onclick是实现不了这种效果的
            cav.addEventListener('mousedown',function(evt){
                if(evt.button==0){
                    let x = evt.pageX;
                    let y = evt.pageY;
                    let rect = cav.getBoundingClientRect(); // canvas的方法
                    x -= rect.left; // 横坐标
                    y -= rect.top; // 纵坐标
                }else{
                    let x = evt.pageX;
                    let y = evt.pageY;
                    let rect = cav.getBoundingClientRect(); // canvas的方法
                    x -= rect.left; // 横坐标
                    y -= rect.top; // 纵坐标
                    cav.mousedown = null; // 移除事件
                }
            })
        }
相关文章
|
4月前
低仿lusaxweb鼠标
低仿lusaxweb鼠标
21 0
按下鼠标右键的时候如何截图
点击右键,出现要操作的菜单项 鼠标移动到,想要操作的菜单项上 这时候按下鼠标左键 最后再按下crtl+a,有的电脑是crtl+alt+a,就截图成功了,这时候是所有屏幕的截图 打开word文件,或者打开画图工具,ctrl+v,就把整张截图粘贴上面了 可以跟进自己需求,再次截图,选择自己想要的部分
101 0
按下鼠标右键的时候如何截图
|
Windows
模拟鼠标点击
模拟鼠标点击
164 0
|
Android开发
fab按钮
牙叔教程 简单易懂
89 0
|
API
用VBS控制鼠标的实现代码(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击)
网上搜到的答案普遍是VBS无法实现,或者是要用第三方COM(ActiveX?)组件。我对第三方组件是很反感的,使用第三方组件毫无可移植性可言,因为别人的系统中不一定注册了这个组件。我的建议是,尽量不要在VBS代码中调用第三方组件,除非你的程序只是写来自己用。
2188 0
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
971 0
第47天:拖动弹出框
假期结束,继续学习! 拖动弹出框效果 1 DOCTYPE html> 2 3 4 5 6 7 *{margin:0;padding:0;} 8 .
807 0