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