Good all the time of day! Tell me how to make the line draw between two points between them. That is, for example, there is a drawn map with cities. You choose one city, then the second, and after that a straight line appears between them, supposedly a route. Here is an example screen:

img

    2 answers 2

    For example, using JSGraphics

      <canvas /> <script language="JavaScript"> var mouse = { x: -1, y: -1 }; $(document).ready(function(){ var cvs = $("canvas")[0].getContext("2d"); $("canvas").click(function(e){ if(mouse.x != -1 && mouse.y != -1){ cvs.beginPath(); cvs.moveTo(mouse.x, mouse.y); cvs.lineTo(e.pageX, e.pageY); cvs.closePath(); cvs.stroke(); mouse.x = -1; mouse.y = -1; }else{ mouse.x = e.pageX; mouse.y = e.pageY; } }); }); </script>
      • Thank! How to change the color and thickness of the line ?? and how to make it possible to draw not anywhere, but exactly where the points of the cities stand, that is, if cities were chosen and not just pressed anywhere. - Karalahti
      • determine the coordinates, if they fall into e.pageX, e.pageY then assign the data for the mouse, if not, then do nothing accordingly. This same finger in the sky poke now. If you have a map in SVG, it’s even easier to organize everything. - binliz
      • This is not just a picture with dots! - Karalahti