用JavaScript繪製光標在畫布上的位置

我試圖通過單擊並拖動鼠標在畫布上繪製。我的問題是，除了線條質量很差（我想要一個更明顯的邊框）這一事實之外，它僅在0,0時才考慮鼠標的位置。當我將鼠標移動到較低的角落時，線條與其距離增加的距離與我在畫布中間時的距離相同，線條已經不在其中。我有我的代碼爲：http://jsfiddle.net/ajTkP/12/用JavaScript繪製光標在畫布上的位置

我也將它張貼在這裏：

var MDown = false; 
var Color = 'blue'; 

var Canvas = document.getElementById('canvas'); 
var Context = Canvas.getContext('2d'); 

Canvas.onselectstart = function() { return false; }; 
Canvas.unselectable = "on"; 
Canvas.style.MozUserSelect = "none"; 

Canvas.onmousedown = function(e) { 
    MDown = true; 
    Context.strokeStyle = Color; 
    Context.lineWidth = 3; 
    Context.lineCap = 'round'; 
    Context.beginPath(); 
    Context.moveTo(e.pageX - Position(Canvas).left, e.pageY - 5); 
} 

Canvas.onmouseup = function() { MDown = false; }; 

Canvas.onmousemove = function(e) { 
    if (MDown) { 
     Context.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5); 
     Context.stroke(); 
    } 
} 

function Position(el) { 
    var position = {left: 0, top: 0}; 
    if (el) { 
     if (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
      position.left += el.offsetLeft; 
      position.top += el.offsetTop; 
     } 
    } 
    return position; 
}

感謝您的幫助！

來源

2012-06-16 ali

您需要設置畫布上的明確width和height。畫布的默認尺寸寬度爲300，高度爲150（see the spec here）。通過CSS設置寬度和高度，您只需拉伸畫布即可。

要麼是：

<canvas id="canvas" width="300" height="200"></canvas>

或將通過JavaScript寬度/高度：

canvas.width = 300; 
canvas.height = 200;

查看更新的jsfiddle：http://jsfiddle.net/ajTkP/13/

來源

2012-06-16 01:54:44 jimr

你救了一個人的生命。上帝祝福你。任何提示使線更平滑？再次感謝！ – ali

僅供參考，這是更好地做到這一點'window.onmousemove'太行會被卡住，當你搬出該地區http://jsfiddle.net/DerekL/ajTkP/14/ –

它看起來像jimr打我衝約畫布高度和寬度。

這條線的質量很差，這是由於您如何畫線。您會注意到您在之間每 onmousemove事件致電stroke()。請記住，它跟蹤的是從beginPath()到closePath()這條線的路徑，因此您基本上多次使用同一條線（每當鼠標移動時）。這是給你別名（看起來塊狀的）線條，而不是你期望的平滑反鋸齒線條。

來源

2012-06-16 02:04:32 Zhihao

所以，我應該叫中風時鼠標鬆開（）？如果我這樣做，我不能看到行，直到我mouseup（）。 – ali

我不知道是否有更好的方法，但可以嘗試保存以前的位置並執行moveTo（previousPosition），lineTo（currentPoisition）和stroke（）。您可能會在每一行之間留下空隙，因此您可能需要稍微玩弄一下。 – Zhihao

剛剛瀏覽了一些畫布繪製應用程序教程，並找到了[另一種方法]（http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/）。基本上每次鼠標移動時都會重新繪製整條線（儘管每次更長一點）。由於它的繪製速度如此之快，用戶不會注意到該行正在重繪。不是很優雅，但它的作品。 – Zhihao

用JavaScript繪製光標在畫布上的位置

回答

相關問題