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

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

在理解事件之前，你需要明白什么是listener和handler。
listener(即監(jiān)聽器)決定當(dāng)一個(gè)事件發(fā)生時(shí)是否做出反應(yīng)。handler(即執(zhí)行者)是一個(gè)函數(shù)，當(dāng)事件發(fā)生時(shí)被調(diào)用。好了，扯了這么多直接上代碼：

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

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

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

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

這樣我們就為canvas綁定了鼠標(biāo)點(diǎn)擊事件，當(dāng)在canvas上按下鼠標(biāo)是就會(huì)在控制臺(tái)看到打印出 "Mouse pressed on element"。

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

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

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

現(xiàn)在讓我們來實(shí)驗(yàn)下先為canvas添加一個(gè)事件，再將其移除

現(xiàn)在你可以看看控制臺(tái)是否還能打印出“mouse down”！

鼠標(biāo)事件一共可以分為：

mousedown

mouseup

click

dbclick

mousewheel

mouseover

mouseout

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

utils.js文件

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

    //在utils對象上定義捕獲坐標(biāo)的方法
    window.utils.captureMouse = function(element){
            //定義一個(gè)名為mouse的對象
            var mouse = {x:0,y:0};
            
            //為元素綁定mousemove事件
            element.addEventListener("mousemove",function(event){
                var x,y;
                
                //獲取鼠標(biāo)位于當(dāng)前屏幕的位置， 并作兼容處理
                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;
                }
                //將當(dāng)前的坐標(biāo)值減去元素的偏移位置，即為鼠標(biāo)位于當(dāng)前canvas的位置
                x -= element.offsetLeft;
                y -= element.offsetTop;

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

這個(gè)方法將DOM元素作為參數(shù)傳入，這樣我們只要將canvas傳入就可以獲取到鼠標(biāo)在當(dāng)前canvas的位置。具體代碼如下：

    
           
you browser not support canvas!

       
       
       

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

getBoundingClientRect（）

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

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

鍵盤事件就兩個(gè)：

keydown

keyup

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

    
任意按下按鍵
   

試一試，當(dāng)按下鼠標(biāo)的方向鍵是是否在控制臺(tái)打印出了相應(yīng)的信息！

觸摸事件包括以下3種：

touchstart

touchend

touchmove

觸摸實(shí)踐中，手指就充當(dāng)了鼠標(biāo)的作用。同樣我們最為關(guān)心的是當(dāng)前觸摸的位置。和captureMouse方法一樣，這里在我們的工具函數(shù)文件中，需要添加一新的方法來捕獲觸摸的位置，名為captureTouch,現(xiàn)在在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;
    };

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