You could use SVG
it's a bit more browser agnostic I suppose.
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 could be generated via Javascript
and then rendered. JSFiddle
A Brief intro into the dynamic JS generation would be something along these lines. :
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 add some JS attributes that you will generated based on variables in flight info:
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 end up with the following example :
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.