Рисование прямых линий в JavaScript

Question

Я просто пытаюсь нарисовать линию с JavaScript.

Я хотел бы, чтобы это было так: http://deepliquid.com/projects/blog/arrows2.html

Моя версия: http://jsfiddle.net/shawn31313/qsWML/5/show

не работает слишком хорошо, и я не знаю, как получить это тоже работа. Это должно быть проблемой в моем JavaScript.

Это мой код:

$(document).ready(function() { 
    var dragStatus = 2, 
     getPos, giveRandomID; 
    $(document).mousedown(function(event) { 
     dragStatus = 0; 
     getPos = { 
      top: event.clientY, 
      left: event.clientX 
     }; 
     giveRandomID = Math.floor(Math.random() * 99999); 
    }); 
    $(document).mousemove(function() { 
     var line = $('#line' + giveRandomID); 
     if (dragStatus == 0) { 
      $('body').append("<div id='line" + giveRandomID + "' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>"); 
      dragStatus = 1; 
     } 
     if (dragStatus == 1) { 
      if (event.clientX > getPos.left) { 
       line.css({ 
        left: getPos.left, 
        width: event.clientX - getPos.left 
       }); 
      } else { 
       line.css({ 
        left: event.clientX, 
        width: getPos.left - event.clientX 
       }); 
      } 
      if (event.clientY > getPos.top) { 
       line.css({ 
        top: getPos.top - Math.abs((event.clientY - getPos.top) * 2), 
        '-webkit-transform': 'rotate(' + (event.clientY - getPos.top) + 'deg)' 
       }); 
      } else { 
       line.css({ 
        top: getPos.top + Math.abs((getPos.top - event.clientY) * 2), 
        '-webkit-transform': 'rotate(' + (getPos.top - event.clientY) + 'deg)' 
       }); 
      } 
      //for DEG "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2) 
     } 
    }); 
    $(document).mouseup(function() { 
     dragStatus = 2; 
    }); 
});​ 

Спасибо за любую помощь фиксации этого. В основном проблема с математикой, просто не знаю, как я могу это исправить.

Answer 1

Используйте холст тег, вот примеры из MDN https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes