摘要：那么既然有添加事件，就有移除事件，使用方式與添加事件幾乎完全一樣事件類型事件執行函數可選，為布爾值表示在冒泡捕獲階段執行唯一需要注意的是即移除事件的函數，這里只能寫函數名，而不能像添加事件一樣將整個功能函數全部寫入。

用戶交互也許是我們學習canvas動畫中首先需要掌握的部分。畢竟，如果沒有交互或者向動畫中做一些動態的輸入，那么這跟看電影有什么區別呢？用戶交互基于事件，一般來說包括：鼠標事件，觸摸事件和鍵盤事件。

在理解事件之前，你需要明白什么是listener和handler。
listener(即監聽器)決定當一個事件發生時是否做出反應。handler(即執行者)是一個函數，當事件發生時被調用。好了，扯了這么多直接上代碼：

    element.addEventListener(type, handler[, useCapture]);

    type: 事件類型
    handler: 事件執行函數
    useCapture: 可選，為布爾值false/true, 表示在冒泡/捕獲階段執行

通過方法addEventListener來為某一元素添加事件，具體到我們的canvas上是什么樣的呢？加入我們現在想要在canvas上綁定一個mousedown事件，具體代碼如下：

    canvas.addEventListener("mousedown", function(event){
        console.log("Mouse pressed on element");
    }, false)

這樣我們就為canvas綁定了鼠標點擊事件，當在canvas上按下鼠標是就會在控制臺看到打印出 "Mouse pressed on element"。

那么既然有添加事件(addEventListener)，就有移除事件(removeEventListener)，使用方式與添加事件幾乎完全一樣：

    element.removeEventListener(type, handler[, useCapture]);
    type: 事件類型
    handler: 事件執行函數
    useCapture: 可選，為布爾值false/true, 表示在冒泡/捕獲階段執行

唯一需要注意的是handler,即移除事件的函數，這里只能寫函數名，而不能像添加事件一樣將整個功能函數全部寫入。也就是說，在添加某個事件的時候，我們可以將需要執行的函數寫在事件監聽之外并命名，這樣如果你想要在后續的代碼中移除該事件，直接將函數名傳入移除事件的handler中即可。

現在讓我們來實驗下先為canvas添加一個事件，再將其移除

現在你可以看看控制臺是否還能打印出“mouse down”！

鼠標事件一共可以分為：

mousedown

mouseup

click

dbclick

mousewheel

mouseover

mouseout

每一個鼠標事件都包含兩個屬性來決定當前鼠標的位置：pageX和pageY。通過pageX和pageY，還有canvas元素的偏移位置，我們就能夠計算出鼠標具體是在canvas元素的什么位置。為了考慮不同瀏覽器的兼容性，以防萬一你可以使用clientX和clientY。在這里，我們創建一個js文件，名為**utils.js**,這個文件是我們的一個工具函數，里面會逐漸加入一些我們重復使用的方法，那么現在我們向我們的工具函數中添加第一個方法captureMouse,具體代碼如下：

utils.js文件

    //將utils定義為window對象下的一個屬性，屬性值為對象
    window.utils = {};

    //在utils對象上定義捕獲坐標的方法
    window.utils.captureMouse = function(element){
            //定義一個名為mouse的對象
            var mouse = {x:0,y:0};
            
            //為元素綁定mousemove事件
            element.addEventListener("mousemove",function(event){
                var x,y;
                
                //獲取鼠標位于當前屏幕的位置， 并作兼容處理
                if(event.pageX||event.pageY){
                    x = event.pageX;
                    y = event.pageY;
                }else{
                    x = event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft;
                    y = event.clientY + document.body.scrollTop +document.documentElement.scrollTop;
                }
                //將當前的坐標值減去元素的偏移位置，即為鼠標位于當前canvas的位置
                x -= element.offsetLeft;
                y -= element.offsetTop;

                mouse.x = x;
                mouse.y = y;
            },false);
             //返回值為mouse對象
             return mouse;
        }

這個方法將DOM元素作為參數傳入，這樣我們只要將canvas傳入就可以獲取到鼠標在當前canvas的位置。具體代碼如下：

    
           
you browser not support canvas!

       
       
       

Have a try!!!看看能否成功。

getBoundingClientRect（）

其實，關于canvas的鼠標位置獲取的方法還可以應用它自身的一個方法getBoundingClientRect，這里做一個介紹，你可以使用，但本系列文章主要使用上面這種更具廣泛性的方法。具體代碼可以參考如下：

        canvas.addEventListener("mousedown",function(event){
                       //event兼容處理
                       var event = event || window.event;
                       //兼容處理，獲取當前鼠標相對屏幕的坐標
                       var winX = event.clientX+document.body.scrollLeft +document.documentElement.scrollLeft || event.pageX;
                       var winY = event.clientY+document.body.scrollTop +document.documentElement.scrollTop || event.pageY;
                       
                       //定義一個對象
                       var can = {x:0, y:0};
                       //調用getBoundingClientRect方法，該方法返回一個對象，包含canvas的left、 top、 width、 height等值
                       
                       var canBox = canvas.getBoundingClientRect();
                       
                   //（winX - canBox.left）：與上面的含義一樣，是減去canvas的偏移量
                   //（canvas.width/canBox.width）：一般來說canvas.width和canBox.width是一樣的，也就是說這兩個的比值為1.但不排除你會為canvas設置邊框，這是實際的坐標位置就會有所變化，比如canvas.width = 500, 你可能設置了一個1px的邊框，那么canBox.width = 502, 所以比值就不為1了。這樣做只是讓數據更精確。
                   
                       can.x = (winX - canBox.left)*(canvas.width/canBox.width);
                       can.y = (winY - canBox.top)*(canvas.height/canBox.height);
                       
                       //輸出
                       console.log(can.x，can.y);
                   },false);

鍵盤事件就兩個：

keydown

keyup

我們同樣可以向綁定鼠標事件那樣為canvas綁定鍵盤事件。好吧！現在我們來看看，如何將一個鍵盤事件綁定到window(為什么不直接綁定到canvas上呢？想想)上：

    
任意按下按鍵
   

試一試，當按下鼠標的方向鍵是是否在控制臺打印出了相應的信息！

觸摸事件包括以下3種：

touchstart

touchend

touchmove

觸摸實踐中，手指就充當了鼠標的作用。同樣我們最為關心的是當前觸摸的位置。和captureMouse方法一樣，這里在我們的工具函數文件中，需要添加一新的方法來捕獲觸摸的位置，名為captureTouch,現在在utils.js文件中添加如下方法：

utils.js文件

    window.utils.captureTouch = function (element) {
      var touch = {
                      x: null,
                    y: null,
                    isPressed: false,
                    event: null
                    }；
      var body_scrollLeft = document.body.scrollLeft,
          element_scrollLeft = document.documentElement.scrollLeft,
          body_scrollTop = document.body.scrollTop,
          element_scrollTop = document.documentElement.scrollTop,
          offsetLeft = element.offsetLeft,
          offsetTop = element.offsetTop;
          
     // 綁定touchstart事件
      element.addEventListener("touchstart", function (event) {
        touch.isPressed = true;
        touch.event = event;
      }, false);
      
     // 綁定touchend事件
      element.addEventListener("touchend", function (event) {
        touch.isPressed = false;
        touch.x = null;
        touch.y = null;
        touch.event = event;
      }, false);
      
     //綁定touchmove事件
      element.addEventListener("touchmove", function (event) {
        var x, y,
            touch_event = event.touches[0]; //第一次touch

        if (touch_event.pageX || touch_event.pageY) {
          x = touch_event.pageX;
          y = touch_event.pageY;
        } else {
          x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
          y = touch_event.clientY + body_scrollTop + element_scrollTop;
        }
        //剪去偏移量
        x -= offsetLeft;
        y -= offsetTop;

        touch.x = x;
        touch.y = y;
        touch.event = event;
      }, false);
      //返回touch對象
      return touch;
    };

這一節主要介紹用戶與canvas交互的各種事件，重要的是你應該在你自己的工具函數文件中包含了以下兩個方法：utils.captureTouch和utils.captureMouse這兩個方法都是為了獲取當前相對于canvas元素的位置。我們將在后面的章節中頻繁使用。當然，除了這兩個方法，由于我們使用的requestAnimationFrame方法同樣也涉及到兼容性的問題，我們將它一同添加到utils.js中，具體代碼請查看utils.js文件。
下一節，三角函數坐標旋轉敬請期待?。?！