HTML5 - 畫布，通過DIV

Question

繪製矩形，我做了這個例子來說明我的問題是什麼：http://jsfiddle.net/GSRgf/

HTML

<canvas id="canvas" width="500" height="500"></canvas> 
<div id="div"></div> 

JS

$(function() { 
var ctx=$('#canvas')[0].getContext('2d'); 
rect = {}; 
drag = false; 

$(document).on('mousedown','#canvas',function(e){ 
    rect.startX = e.pageX - $(this).offset().left; 
    rect.startY = e.pageY - $(this).offset().top; 
    rect.w=0; 
    rect.h=0; 
    drag = true; 
}); 

$(document).on('mouseup','#canvas',function(){ 
    drag = false; 
}); 

$(document).on('mousemove','#canvas',function(e){ 
    if (drag) { 
     rect.w = (e.pageX - $(this).offset().left)- rect.startX; 
     rect.h = (e.pageY - $(this).offset().top)- rect.startY; 
     ctx.clearRect(0, 0, 500, 500); 
     ctx.fillStyle = 'rgba(0,0,0,0.5)'; 
     ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
    } 
});  
}); 

這怎麼可能當鼠標懸停在div上時，繼續繪製矩形？

謝謝！

Answer 1

移除mousemove和mouseup事件的「#canvas」選擇器。 編輯mousemove事件以使用$（「＃canvas」）而不是$（this）。

http://jsfiddle.net/GSRgf/3/

$(function() { 
    var ctx=$('#canvas')[0].getContext('2d'); 
    rect = {}; 
    drag = false; 

    $(document).on('mousedown','#canvas',function(e){ 
     rect.startX = e.pageX - $(this).offset().left; 
     rect.startY = e.pageY - $(this).offset().top; 
     rect.w=0; 
     rect.h=0; 
     drag = true; 
    }); 

    $(document).on('mouseup',function(){ 
     drag = false; 
    }); 

    $(document).on('mousemove',function(e){ 
     if (drag) { 
      rect.w = (e.pageX - $("#canvas").offset().left)- rect.startX; 
      rect.h = (e.pageY - $("#canvas").offset().top)- rect.startY; 
      ctx.clearRect(0, 0, 500, 500); 
      ctx.fillStyle = 'rgba(0,0,0,0.5)'; 
      ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
     } 
    });  
});