如何在给定用户输入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/