用css或画布绘制曲线

Question

我需要绘制动态曲线来显示飞行持续时间.

知道怎么做吗？

我尝试使用干净的CSS,但有一些渲染问题,我认为只有方法是使用canvas.

Answer 1

SVG我想你可以使用它更多的浏览器不可知.

SVG浏览器支持

Canvas浏览器支持

你的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>

当然,这可以通过Javascript然后再生成.的jsfiddle

SVG教程

简要介绍动态JS生成将是这些方面的事情.:

创建你的dom元素:

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

现在我们根据航班信息中的变量添加一些JS属性:

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);

添加一些CSS动画,使它更漂亮,你最终得到以下示例:

JSFiddle动态