HTML5畫布繪製應用程序中的鼠標座標漂移

我正在使用HTML5畫布元素創建一個簡單的繪圖應用程序。程序邏輯工作正常，除了一件事外，一切都運行良好。HTML5畫布繪製應用程序中的鼠標座標漂移

當我繪製第一行時，鼠標座標和線條完美匹配。但是，在每個後續行之後，繪製的線的座標約爲0.5〜1px。這些差異會累積起來，並且在繪製大約十條單獨的線條後效果很容易看到。這發生在所有瀏覽器中。

舉一個實例，檢查this fiddle。我儘可能地去除了所有的東西。很顯然，真正的應用程序要複雜得多，但即使在這個簡化版本中，問題仍然存在，這讓我覺得我錯過了一些非常明顯的東西。

在我看來，我可能會以某種方式將座標四捨五入，這是我能想到的唯一可以解釋這種漸變的座標。我使用專有函數來獲取偏移值，所以我嘗試使用jQuery（因爲這從來沒有給我過去的問題），但沒有任何改變。

請幫我弄清楚爲什麼會發生這種情況！

顯然我現在需要發佈代碼才能鏈接到jsfiddle。我不知道哪部分代碼可能是錯誤的，所以我提前道歉發佈一切，並創建一個文本牆。

var offsetX = 0, offsetY = 0; 
var currentMouseCoords = { 
    x : 0, 
    y : 0 
}; 
var drawPing = null; 
var ctx = null; 

$('#cover').mousedown(function (event) { 
    event.preventDefault(); 

    var f = $(this).offset(); 
    offsetX = f.left; 
    offsetY = f.top; 

    currentMouseCoords.x = event.pageX - offsetX; 
    currentMouseCoords.y = event.pageY - offsetY; 

    drawStart(); 

    if (!drawPing) { 
     drawPing = setInterval(draw, 10); 
    } 
}) 
.mousemove(function (event) { 

    currentMouseCoords.x = event.pageX - offsetX; 
    currentMouseCoords.y = event.pageY - offsetY; 

}) 
.mouseout(function (event) { 
    //When mouse leaves canvas, quit drawing 
    drawEnd(); 
}) 
.mouseup(function (event) { 
    //When mouse leaves canvas, quit drawing 
    drawEnd(); 
}) 


/* Functions that perform the actual drawing */ 

function drawStart() { 
    //Get canvas context 
    ctx = document.getElementById('canvas').getContext("2d"); 
    ctx.translate(0.5,0.5); 

    //Set styles 
    ctx.strokeStyle = '#333333'; 
    ctx.lineCap = 'round'; 
    ctx.lineJoin = 'round'; 
    ctx.lineWidth = 1; 

    //Begin path 
    ctx.beginPath(); 
    ctx.moveTo(
     currentMouseCoords.x, 
     currentMouseCoords.y 
    ); 

} 

function draw() { 
    ctx.lineTo(
     currentMouseCoords.x, 
     currentMouseCoords.y 
    ); 
    ctx.stroke(); 
} 

function drawEnd() { 
    clearInterval(drawPing); 
    drawPing = null; 
    if (ctx) { 
     ctx.closePath(); 
     ctx = null; 
    } 
}

我想這會讓很多更有意義，如果你只是看看實際的小提琴....

爲了記錄在案，我用Google搜索了好一陣子，看是否有人否則有這個問題，但要麼不是那麼常見，要麼我找不到合適的詞組合。鼠標座標存在很多問題，但它們中的任何一個都不像我所遇到的問題。

來源

2013-11-22 David John Welsh

您反覆在drawStart功能翻譯和翻譯那些正在積累：

ctx.translate(0.5,0.5)

可以扭轉與翻譯：或ctx.save包裹繪製代碼（ - - 5，5。）（）/ctx.restore（）。

您可能還想將ctx = document ...移出drawStart「loop」以獲得更好的性能。

//Get canvas context outside drawStart 

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

來源

2013-11-22 05:29:18 markE

哦我 [字我不能在這裏使用] 神我是一個白癡。我知道這件事很明顯，但是男人......謝謝你，你是我的救世主。 –

HTML5畫布繪製應用程序中的鼠標座標漂移

回答

相關問題