在畫布上跟蹤鼠標移動時的奇怪行爲

我正在使用簡單的腳本在畫布上用鼠標畫一條線。當用戶在畫布上點擊並拖拽時，它應該在該區域繪製。這條線確實被繪製出來了，但它不跟隨鼠標，它似乎不是一個抵消問題。按住按鈕的時間越長，線條越遠離光標。它比我問的要多，我不明白爲什麼。例如，如果我從畫布的中心開始向底部移動，則該線將在光標之前很長的一段時間到達底部。以下是我正在使用的代碼：在畫布上跟蹤鼠標移動時的奇怪行爲

if(window.addEventListener) { 
window.addEventListener('load', function() { 

    function init() { 

    front_canvas = document.getElementById('front_paint_canvas'); 
    front_context = front_canvas.getContext('2d'); 

    tool = new tool_pencil(); 

    front_canvas.addEventListener('mousedown', ev_canvas, false); 
    front_canvas.addEventListener('mousemove', ev_canvas, false); 
    front_canvas.addEventListener('mouseup', ev_canvas, false); 
    } 

    function tool_pencil() { 
    var tool = this; 
    this.started = false; 

    this.mousedown = function (ev) { 
     context.beginPath(); 
     context.moveTo(ev.clientX - 230, ev.clientY - 280); 
     tool.started = true; 
    }; 

    this.mousemove = function (ev) { 
     if (tool.started) { 
     context.lineTo(ev.clientX - 230, ev.clientY - 280); 
     context.stroke(); 
     } 
    }; 

    this.mouseup = function (ev) { 
     if (tool.started) { 
     tool.mousemove(ev); 
     tool.started = false; 
     } 
    }; 
    } 

    function ev_canvas (ev) { 
     context = ev.target.getContext('2d'); 

    var func = tool[ev.type]; 
    if (func) { 
     func(ev); 
    } 
    } 

    init(); 

}, false); }

這怎麼可能發生？

來源

2013-08-24 Fibericon

是230,280你的畫布的位置？ –

是的，這是補償定位的補償。 – Fibericon

這個小提琴http://jsfiddle.net/TCATw/適用於我，在Chrome上。問題是否在您的瀏覽器中重現？ –

我想通了。我把畫布大小放在CSS中而不是作爲元素屬性。這導致畫布縮放而不是簡單地調整大小，這意味着它將畫線處理爲相對座標而不是絕對。

來源

2013-08-30 07:07:50 Fibericon

您的環境可能沒有與畫布相同的尺寸。爲確保兩者對齊，請在創建上下文之前使用此

front_canvas.width = front_canvas.clientWidth; 
front_canvas.height = front_canvas.clientHeight;

。

來源

2013-08-24 12:02:15

這似乎導致它完全失敗。添加此代碼後不會繪製任何線條。 – Fibericon

在畫布上跟蹤鼠標移動時的奇怪行爲

回答

相關問題