मैं अपने ड्राइंग ऐप में एक लाइन तोड़ने से तेज माउस आंदोलन को कैसे रोक सकता हूं?

Question

मैं एक स्क्रिप्ट है कि उपयोगकर्ता माउस के साथ आकर्षित करने के लिए अनुमति देता है पर काम कर रहा हूँ: http://jsfiddle.net/ujMGu/

समस्या: तुम सच में तेजी से माउस ले जाते हैं, तो यह झटके और कुछ स्थानों पर छोड़ देता है। ड्राइंग लाइन के बीच में किसी भी काले रंग की जगहों को छोड़ दिए बिना सभी बिंदुओं को कैप्चर करने का कोई तरीका है?

सीएसएस

#myid{background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
    display: block; 
    height: 1000px; 
    margin: 3%; 
    position: relative; 
    text-indent: -1100px;}​ 

जे एस/JQ

$('#myid') 
.css('position','relative') 
.unbind().die() 
.bind('mousemove mouseover',function (e){ 
var top = parseInt(e.pageY)-$(this).offset().top; 
var left= parseInt(e.pageX)-$(this).offset().left; 
var pixel= $('<div></div>') 
    .css({ 
     width:10,height:10, 
     background: '#fff', 
     position:'absolute', 
     top: top, left: left, 
     'border-radius': 2 
    }); 
    $(this).append(pixel); 
});​ 

एचटीएमएल

<div id="myid"></div> 

Answer 1

चेक बाहर इस: http://jsfiddle.net/KodeKreachor/9DbP3/6/

दिए गए लिंक पर निम्नलिखित वस्तु एल्गोरिथ्म शामिल हैं:

var drawer = new Drawer(); 

मुझे यदि आप जानते हैं मेरे पास कोई सवाल है कि मैंने यह कैसे किया। आधार Bresenham की लाइन एल्गोरिदम पर आधारित है और पुराने ब्राउज़र में भी संगत होना चाहिए।

Answer 2

आप का ट्रैक रखने की आवश्यकता होगी पिछला बिंदु और फिर नए बिंदु और पिछले के बीच एक रेखा खींचें।

Answer 3

कैनवास का उपयोग क्यों नहीं करें? यह रेखा खींचने उपयोगिताओं की एक संख्या है:

http://www.w3schools.com/html5/html5_ref_canvas.asp

Answer 4

जैसा कि @ कंद ने उल्लेख किया है, कैनवास वास्तव में ड्राइंग के लिए सबसे अच्छा उपकरण है।

आप अपने div विधि का उपयोग करना चाहिए, या अगर यह सिर्फ मनोरंजन के लिए है, तो आप, Bresenham's line algorithm पिछले माउस स्थिति सहेज कर अपने दृष्टिकोण का विस्तार कर सकते हैं और फिर, बीच "पिक्सल" लाइन का उपयोग पूरा करने के लिए आवश्यक आकर्षित उदाहरण के लिए अगर ।