canvas事件處理機制

可以查看demo：http://sandbox.runjs.cn/show/hjb2hzzx（建議查看console查看點擊后的改變）

具體原理是每次點擊的時候去判斷當前的鼠標坐標是屬於哪一個路徑下的，對當前的這個形狀改變狀態。

for (var i = 0; i < drawData.length; i++) {
   drawSingleCircle(i);
   if (ctx.isPointInPath(x, y)) {
      changeStatus(i);
   }
}

參考：http://www.imooc.com/video/4320/227

關鍵代碼：

(function(window) {
        var document = window.document;
        var clientW = window.innerWidth;
        var clientH = window.innerHeight;

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        canvas.width = clientW;
        canvas.height = clientH;

        var drawData = [];  // 存數據

        // 添加數據
        function addData() {
            for (var i = 0; i < 10; i++) {
                var data = {
                    id: i,
                    type: 'arc',
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    radius: Math.random() * 50 + 20
                };
                drawData.push(data);
            }
        }

        // 畫圓
        function drawCircle() {
            addData();
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for (var i = 0; i < drawData.length; i++) {
                drawSingleCircle(i);
            }
        }
        drawCircle();

        // 畫單個圓
        function drawSingleCircle(i){
            ctx.beginPath();
            ctx.arc(drawData[i].x, drawData[i].y, drawData[i].radius, 0, Math.PI * 2, true);
            ctx.fillStyle = '#000';
            ctx.fill();
            ctx.closePath();
        }

        // 重新繪制（點擊事件中需要用到）
        function reDraw(x, y) {
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for (var i = 0; i < drawData.length; i++) {
                drawSingleCircle(i);
                if (ctx.isPointInPath(x, y)) {
                    changeStatus(i);
                }
            }
        }

        // 如果在事件觸發的范圍內，可以做一些事情來改變狀態
        function changeStatus(i){
            ctx.fillStyle = "#f00";
            ctx.fill();
            console.log(drawData[i].type);
            console.log('你點擊了第' + i + '個');
        }

        // 點擊事件處理函數
        function onClick(event) {
            var e = event || window.event;
            var x = e.clientX - canvas.getBoundingClientRect().left;
            var y = e.clientY - canvas.getBoundingClientRect().top;
            reDraw(x, y);
        }
        
        // 注冊點擊事件
        canvas.addEventListener('click',onClick,false);
    })(window);