如何在給定用戶輸入X，Y點的情況下繪製HTML5畫布線？

Question

我正試圖在畫布中建立一個平面佈置圖模型。目前，我的畫布上有一個網格圖像，用戶可以通過單擊並拖動鼠標來繪製線條。但是，這並不能保證直線。

是否有無論如何我可以在HTML頁面中提供輸入字段，供用戶輸入行的開始和結束x和y座標，並在畫布代碼中更新它？我是一個新手，當涉及到JS/AJAX，所以任何補救幫助表示讚賞:)

眼下，這是決定該行是如何被繪製的部分：我懷疑它

$(document).ready(function() { 

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

    if(canvas.getContext) { 
     $('#canvas').mousedown(function (evt) { 
      var offset = $('#canvas').offset(); 
      context.beginPath(); 
      context.moveTo(20, 20); 
     }); 

     $(document).mousemove(function(evt) { 
      var offset = $('#canvas').offset(); 
      context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top); 
      context.stroke(); 
     }).mouseup(function() { 
      $(document).unbind('mousemove'); 
      $(document).unbind('mouseup'); 
     }); 

     $('#clearcanvas').click(function() { 
      context.clearRect(0, 0, 600, 580);  
     }); 
    } 
}); 

涉及修改以下代碼：

context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top); 

Answer 1

很簡單，你可以使用4個輸入字段，並採取各值時按下按鈕

button.addEventListener('click', function() { 
    ctx.beginPath(); 
    ctx.moveTo(x1.value, y1.value); 
    ctx.lineTo(x2.value, y2.value); 
    ctx.stroke(); 
}, false); 

http://jsfiddle.net/TeGGx/