Próbuję odtworzyć promień obramowania CSS3 w obszarze roboczym.Promień obramowania CSS3 na płótno HTML5
Łatwo narysować zaokrąglony prostokąt, ale w CSS wartość każdej krawędzi może być wysoka.
Na przykład:
HTML
<div class="normal_radius"></div>
<div class="high_radius"></div>
<div class="high2_radius"></div>
CSS
div { height:50px;width:50px;position:absolute;top:10px; }
.normal_radius {
border: 1px solid black;
border-radius: 5px 5px 10px 15px;
left: 10px;
}
.high_radius {
border: 1px solid red;
border-radius: 5000px 500px 100px 150px;
left: 80px;
}
.high2_radius {
border: 1px solid blue;
border-radius: 2500px 250px 50px 75px;
left: 160px;
}
tu jsfiddle
Czarny, normalna wartość promienia granica, mogę odtworzyć tego. Czerwona, wysoka wartość dla promienia obramowania, nie wiem, jak to odtworzyć. I niebieska, wysoka wartość podzielona przez 2, taki sam wynik czerwony.
Moje pytanie jest proste, jak odtworzyć czerwony i niebieski na płótnie?
Pozdrawiamy.
Myślę, że trzeba użyć metod ścieżki, aby narysować krzywą przez siebie. https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes przewiń w dół do "moveTo" i "Krzywe Beziera i kwadratowe" – Mic
Po prostu pytanie: po co używać tych wielkich wartości dla 'border-radius' w swoim CSS, gdy 'border-radius: 100% 10% 0 0;' daje ten sam efekt? Http: //jsfiddle.net/fAJ9t/66/ – Ana
Cześć, dziękuję za odpowiedź, ale znam metodę narysowania zaokrąglonego prostokąta, Chcę, aby algorytm/formuła narysować zaokrąglony prostokąt, jeśli użytkownik wprowadza wysoką wartość. – kran