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