Làm cách nào để vẽ các đường Canvas HTML5 cho đầu vào của người dùng của các điểm X, Y?

Question

Tôi đang cố gắng xây dựng mô hình floorplan trong Canvas. Hiện tại tôi có hình ảnh lưới trong canvas của mình và có khả năng cho người dùng vẽ đường bằng cách nhấp và kéo chuột của họ. Nhưng, điều này không đảm bảo đường thẳng.

Có cách nào tôi có thể cung cấp trường nhập trong trang html để người dùng nhập đầu và kết thúc tọa độ x và y của các dòng và cập nhật trong mã canvas của tôi không? Tôi là một người mới bắt đầu khi nói đến JS/AJAX, vì vậy bất kỳ sự giúp đỡ khắc phục hậu quả được đánh giá cao :)

Ngay bây giờ, đây là phần mà mệnh lệnh như thế nào các dòng được rút ra:

$(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);  
     }); 
    } 
}); 

tôi nghi ngờ nó liên quan đến việc sửa đổi mã sau:

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

Answer 1

Rất đơn giản bạn có thể sử dụng 4 lĩnh vực đầu vào và lấy giá trị của mỗi khi một nút được nhấn

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/