畫布使用鼠標座標繪圖問題？

Question

我正在使用鼠標的x/y座標繪製畫布，但是我繪製的線總是繪製一點點，請嘗試在此處繪製：http://zachrip.net/widgets/onlineedit/index.html（左上角），以獲取我的示例意思。沒有抵消，所以我不考慮它，所以我不知道這是什麼問題？

Answer 1

這裏的問題是，你是通過你的CSS設置畫布元素大小，但你不設置繪圖表面大小。

繪圖表面的默認大小是300px x 150px。既然你沒有設置它，但是設置了元素尺寸，瀏覽器會縮放繪圖表面的尺寸以適應元素。通過鼠標事件獲得的x和y座標對應於「元素大小」，而不是實際的「繪製表面大小」。這就是爲什麼你得到抵消。

現在，我之前發佈的fiddle只是設置了繪圖表面的大小，而不是元素。而這樣的作品，但如果你寧願有不同的元素與拉絲面的大小，那麼你也可以做

function scaleCoords(x, y) { 
    x = x * DrawingSurfaceSize.width/ElementSize.width; 
    y = y * DrawingSurfaceSize.height/ElementSize.height; 

    return {x: x, y: y}; 
} 

Example for second method。