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、I