HTML5 Canvas 绘图方法整理【十五、Canvas页面交互：鼠标事件】

ゞ浴缸里的玫瑰 2022-05-31 10:15 830阅读 0赞

在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>

效果图：

![这里写图片描述][70]

之前的代码引入了一个tool.js 的一个文件，里面代码属于JavaScript范畴，在这里就不多解释了，直接复制过来：

function addEvent(obj,type,handle){
                try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
                    obj.addEventListener(type,handle,false);
                }catch(e){
                    try{  // IE8.0及其以下版本
                        obj.attachEvent('on' + type,handle);
                    }catch(e){  // 早期浏览器
                        obj['on' + type] = handle;
                    }
                }
            }
    
            window.tools={};
    
            window.tools.getMouse=function(element){
                var mouse={x:0,y:0};
    
                addEvent(element,"mousemove",function(e){
                    var x, y;
                    var e= e || window.event;
    
                    if(e.pageX || e.pageY){ //兼容做到ie9
                        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;
            };

[70]: /images/20220531/761f6773a1f44827aca55b18b52f282f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，830人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas 绘图方法整理【十七、Canvas透明度 / 图形叠加、层次、冲突】

Canvas 设置透明度：语法： ctx.globalAlpha= 属性值; 属性值是 0 - 1之间的数字。同CSS一样的透明度属性值不过fillStyle

不念不忘少年蓝@/ 2022年05月31日 11:44/ 0 赞/ 598 阅读

相关 HTML5 Canvas 绘图方法整理【十六、Canvas键盘事件、keyCode对照表】

在Canvas中键盘事件分为以下两种： 1、键盘按下 : keydown 2、键盘松开 : keyup; -------------------- 附上一份 k

忘是亡心i/ 2022年05月31日 10:23/ 0 赞/ 305 阅读

相关 HTML5 Canvas 绘图方法整理【十五、Canvas页面交互：鼠标事件】

在Canvas中鼠标事件分为以下三种： 1、鼠标按下 : mousedown 2、鼠标松开 : mouseup; 3、鼠标移动 : mousemove 一般需要

ゞ浴缸里的玫瑰/ 2022年05月31日 10:15/ 0 赞/ 831 阅读

相关 HTML5 Canvas 开发绘图方法整理【十三、Canvas重点之：状态】

Canvas最重要的两个概念，一个是路径，另一个就是状态了。要知道，Canvas 是基于“状态”来绘制的，每次绘制（fill() 或 stroke() ）的时候都会检查

快来打我*/ 2022年05月31日 10:05/ 0 赞/ 255 阅读

相关 HTML5 Canvas 开发绘图方法整理【十二、Canvas重点之：路径】

Canvas 路径可以说是一个非常的！相当的！重要的东西，除了矩形，其他基本所有图形都是以路径为基础的。路径操作有三种方法： beginPath() 起始一条

川长思鸟来/ 2022年05月31日 09:49/ 0 赞/ 328 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 322 阅读

相关 HTML5 Canvas 开发绘图方法整理【八、Canvas 转换】

Canvas 转换方法：所有单位默认为 “px ” ; 转换： Canvas 转换方法：所有单位默认为 “px ” ; translate() 重新映射画布上的

我不是女神ヾ/ 2022年05月31日 09:17/ 0 赞/ 290 阅读

相关 HTML5 Canvas 开发绘图方法整理【五、canvas text / 文本、文字相关】

关于 Canvas文本的方法和属性如下： ![这里写图片描述][70] 另外再加上 fillStyle() 与 strokeStyle(); 一般情况下都是 fill

梦里梦外;/ 2022年05月31日 09:05/ 0 赞/ 441 阅读

相关 HTML5 Canvas 开发绘图方法整理【二、canvas直线 & canvas矩形】

开始绘制图形之前有一点需要说一下，Canvas 采用的坐标系是W3C的坐标系： X轴正方向向右; Y轴正方向向下; 所有的绘制方向都以这个为准。

红太狼/ 2022年05月31日 07:50/ 0 赞/ 545 阅读

相关 HTML5 Canvas 绘图方法整理【十八、Canvas动画/ requestAnimationFrame() 兼容】

Canvas动画与一般的JS动画不太一样，因为它并不是用定时器 setInterval() 实现的，事实上，setInterval() 稍微存在一些性能问题，对于Ca

柔情只为你懂/ 2022年05月29日 01:15/ 0 赞/ 344 阅读