CSS veya kanvaslı kavisli çizgiler çizin

Question

Uçuş sürelerini göstermek için dinamik eğri çizgiler çizmem gerekiyor.

Bunu nasıl yapabilirim?

Temiz css ile çalışıyordum ama bazı oluşturma sorunları var, bence yalnızca yöntem tuval kullanmaktır.

Answer 1

Bunu herhalde agnostik biraz daha tarayıcıdır SVG kullanabilirsiniz.

SVG Browser Support

HTML'nize böyle

Canvas Browser Support

şey:

bu Javascript üzerinden oluşturulan ve daha sonra işlenmiş olabilir Tabii

<?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> 

. JSFiddle

SVG Tutorial

dinamik JS nesil içine Kısa intro bu satırlar boyunca bir şey olurdu. : Bunu biraz yapmaya

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

bazı CSS Animasyon ekleyin:

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

Şimdi bazı JS Eğer uçuş bilgi değişkenlere dayalı oluşturulan olacağı niteliklerini ekleyin:

sizin dom elemanı oluşturma güzel ve aşağıdaki örnekle bitirmek:

JSFiddle Dynamic