CSS/JavaScript：樣式畫布時的問題（用於鼠標繪圖）

Question

我有這個簡單的代碼用於在畫布中用鼠標繪圖。但是，如果我嘗試對畫布進行樣式設置，例如改變寬度或居中，則會將指針和繪製的線條分開。我該如何解決這個問題？

的JavaScript：

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

el.onmousedown = function(e) { 
    isDrawing = true; 
    ctx.moveTo(e.clientX, e.clientY); 
}; 
el.onmousemove = function(e) { 
    if (isDrawing) { 
    ctx.lineTo(e.clientX, e.clientY); 
    ctx.stroke(); 
    } 
}; 
el.onmouseup = function() { 
    isDrawing = false; 
}; 

HTML：

CSS：

canvas { 
    border: 2px solid #ccc; 
    padding-left: 0; 
    padding-right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    width: 800px; 
} 

這裏有一個Fiddle

Answer 1

從不使用CSS設置畫布的寬度/高度。這真是一個壞主意。始終使用畫布的本地寬度/高度屬性。

另外，您應該使用e.offsetX和e.offsetY來獲取鼠標的x和y座標。

這是一個working fiddle