用css或画布绘制曲线

Question

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

知道我该怎么办吗？

我尝试使用干净的CSS，但有一些渲染问题，我认为只有方法是使用画布。

Answer 1

你可以使用SVG我认为它与浏览器无关。

SVG Browser Support

Canvas Browser Support

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 Tutorial

动态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 Dynamic