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

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