एक्स, वाई अंक के उपयोगकर्ता इनपुट दिए गए एचटीएमएल 5 कैनवास लाइनों को कैसे आकर्षित करें?

Question

मैं कैनवास में एक फर्शप्लान मॉडल बनाने की कोशिश कर रहा हूं। वर्तमान में मेरे पास मेरे कैनवास में एक ग्रिड छवि है और उपयोगकर्ताओं को अपने माउस पर क्लिक करके खींचकर लाइन खींचने की क्षमता है। लेकिन, यह सीधे लाइनों की गारंटी नहीं देता है।

क्या वैसे भी मैं उपयोगकर्ताओं के लिए एचटीएमएल पेज में इनपुट फ़ील्ड प्रदान कर सकता हूं ताकि लाइनों के शुरुआती और एक्स और वाई समन्वय को समाप्त किया जा सके और इसे मेरे कैनवास कोड में अपडेट किया जा सके? मैं अभी शुरुआत कर रहा हूँ जब यह जे एस/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/