Draw curved lines using css or canvas

Question

I need to draw dynamic curved lines to show the duration of the flight.

Any idea how I can do this?

I tried with pure css, but had some rendering problems, I think that only the method should use canvas.

Answer 1

You could use SVG slightly more aggressive browser, I suppose.

SVG Browser Support

Canvas Browser Support

Something like this in your HTML:

 <?xml version="1.0" standalone="no"?> <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> </svg> 

Of course, this can be generated via Javascript and then displayed. Jsfiddle

SVG Tutorial

A brief introduction to the JS dynamic generation will be something like this:

Create your dom element:

 <svg id="flight" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg> 

Now we will add some JS attributes that you will create based on the variables in the flight information:

 var svgNS = "http://www.w3.org/2000/svg"; var flightPath = document.createElementNS(svgNS,"path"); flightPath.setAttributeNS(null,"id","path_1"); //This is what you need to generate based on your variables flightPath.setAttributeNS(null,"d","M10 80 Q 95 10 180 80"); //Now we add our flight path to the view. document.getElementById("flight").appendChild(flightPath); 

Add some CSS animation to make it a little prettier and you will get the following example:

JSFiddle Dynamic