X、Yポイントのユーザー入力を与えられたHTML5キャンバスラインを描画する方法は？

Question

私はCanvasでフロアプランモデルを構築しようとしています。現在、キャンバスにグリッドイメージがあり、マウスをクリックしてドラッグすることで線を描くことができます。しかし、これは直線を保証するものではありません。

とにかく、行の先頭と最後のx座標とy座標を入力するためのhtmlページの入力フィールドを提供できますか？それをキャンバスコードで更新しますか？それは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/