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范畴，在这里就不多解释了，直接复制过来：

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