在表格中使用javascript繪製到畫布

Question

我從另一個線程抓取了這段代碼。很棒，直到我把它放到桌子上。圖紙垂直關閉。我試過了我能想到的一切。

var canvas, ctx, flag = false, 
 
    prevX = 0, 
 
    currX = 0, 
 
    prevY = 0, 
 
    currY = 0, 
 
    dot_flag = false; 
 

 
window.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    ctx = canvas.getContext("2d"); 
 
    w = canvas.width; 
 
    h = canvas.height; 
 

 
    canvas.addEventListener("mousemove", function (e) { 
 
     findxy('move', e) 
 
    }, false); 
 
    canvas.addEventListener("mousedown", function (e) { 
 
     findxy('down', e) 
 
    }, false); 
 
    canvas.addEventListener("mouseup", function (e) { 
 
     findxy('up', e) 
 
    }, false); 
 
    canvas.addEventListener("mouseout", function (e) { 
 
     findxy('out', e) 
 
    }, false); 
 
} 
 

 
function draw() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(prevX, prevY); 
 
    ctx.lineTo(currX, currY); 
 
    ctx.strokeStyle = "black"; 
 
    ctx.lineWidth = 2; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 

 
function findxy(res, e) { 
 
    if (res == 'down') { 
 
     prevX = currX; 
 
     prevY = currY; 
 
     currX = e.clientX; - canvas.offsetLeft; 
 
     currY = e.clientY - canvas.offsetTop; 
 

 
     flag = true; 
 
     dot_flag = true; 
 
     if (dot_flag) { 
 
      ctx.beginPath(); 
 
      ctx.fillStyle = "black"; 
 
      ctx.fillRect(currX, currY, 2, 2); 
 
      ctx.closePath(); 
 
      dot_flag = false; 
 
     } 
 
    } 
 
    if (res == 'up' || res == "out") { 
 
     flag = false; 
 
    } 
 
    if (res == 'move') { 
 
     if (flag) { 
 
      prevX = currX; 
 
      prevY = currY; 
 
      currX = e.clientX - canvas.offsetLeft; 
 
      currY = e.clientY - canvas.offsetTop; 
 
      draw(); 
 
     } 
 
    } 
 
}

<table> 
 
    <tr height=100> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td style='border:1px solid black;'> 
 
      <canvas id="canvas" width="400" height="400"></canvas> 
 
     </td> 
 
    </tr> 
 
</table>

如果刪除表，它的作品，因爲它應該。

Answer 1

你需要從

canvas.getBoundingClientRect(); 

得到補償使用canvas.offsetTop和canvas.offsetLeft讓你抵消相對於父。

var canvas, ctx, flag = false, 
 
    prevX = 0, 
 
    currX = 0, 
 
    prevY = 0, 
 
    currY = 0, 
 
    dot_flag = false; 
 

 
window.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    ctx = canvas.getContext("2d"); 
 
    w = canvas.width; 
 
    h = canvas.height; 
 

 
    canvas.addEventListener("mousemove", function (e) { 
 
     findxy('move', e) 
 
    }, false); 
 
    canvas.addEventListener("mousedown", function (e) { 
 
     findxy('down', e) 
 
    }, false); 
 
    canvas.addEventListener("mouseup", function (e) { 
 
     findxy('up', e) 
 
    }, false); 
 
    canvas.addEventListener("mouseout", function (e) { 
 
     findxy('out', e) 
 
    }, false); 
 
} 
 

 
function draw() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(prevX, prevY); 
 
    ctx.lineTo(currX, currY); 
 
    ctx.strokeStyle = "black"; 
 
    ctx.lineWidth = 2; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 

 
function findxy(res, e) { 
 
    if (res == 'down') { 
 
     prevX = currX; 
 
     prevY = currY; 
 
     rect = canvas.getBoundingClientRect(); 
 
     currX = e.clientX - rect.left; 
 
     currY = e.clientY - rect.top; 
 

 
     flag = true; 
 
     dot_flag = true; 
 
     if (dot_flag) { 
 
      ctx.beginPath(); 
 
      ctx.fillStyle = "black"; 
 
      ctx.fillRect(currX, currY, 2, 2); 
 
      ctx.closePath(); 
 
      dot_flag = false; 
 
     } 
 
    } 
 
    if (res == 'up' || res == "out") { 
 
     flag = false; 
 
    } 
 
    if (res == 'move') { 
 
     if (flag) { 
 
      prevX = currX; 
 
      prevY = currY; 
 
      currX = e.clientX - rect.left; 
 
      currY = e.clientY - rect.top; 
 
      draw(); 
 
     } 
 
    } 
 
}

<table> 
 
    <tr height=100> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td style='border:1px solid black;'> 
 
      <canvas id="canvas" width="400" height="400"></canvas> 
 
     </td> 
 
    </tr> 
 
</table>