Płótno narysuj koło z kwadratową krzywą

Question

Wiem, że mogę rysować łuk za pomocą funkcji arc płótna, ale gdy zwiększam rozmiar tego łuku, zmienia on jego początek i koniec x, y punktów. Pomyślałem więc, czy możemy narysować łuk w inny sposób, utrzymując stałe punkty początkowe, a jednocześnie zwiększając jego rozmiar.

Edytuj
Poniżej znajdują się zdjęcia pokazujące, czego szukam. Pierwsze zdjęcie przedstawia prostokąt. kiedy jego strona jest rozciągnięta, zmieniła się w okrąg (drugie zdjęcie). kiedy strona jest dalej rozciągnięta, zmieniła się w duże koło. Na wszystkich obrazach widać, że punkty końcowe koła są połączone z rogami prostokąta. To właśnie chcę zrobić.

1-ta Obraz

2 zdj

3-te Obraz

Albo widać this video do unde zachowaj to, co chcę zrobić.

Co mam zrobić
Ten fiddle pokazuje wynik mojej pracy.
Aby narysować prostokąt, wystarczy kliknąć i przeciągnąć myszą.

Here is the code

Answer 1

Sprawdź to: http://jsfiddle.net/KZBzq/4/

Updated odpowiedź z bezierCurveTo

HTML

<label>Range :</label> 
<input type="range" name="points" value="0" min="0" step="1" max="100" id="range"> 
<canvas id="myCanvas" width="578" height="250"></canvas> 

JS

draw(100); 

$('#range').on('change', function(){ 
    range = parseInt($(this).val()); 
    draw(100-range) 
}) 

function draw(val){ 

    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'), 
    x = 100, 
    y = 100, 
    cp1x = x/2, 
    cp2x = y/2, 
    cp1y = val, 
    cp2y = val; 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    context.beginPath(); 
    context.lineWidth = 1; 

    context.moveTo(25 , x); 
    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 

    // line color 
    context.strokeStyle = 'black'; 
    context.stroke(); 

} 

Teraz x i Y są ustalone. Czy to było twoje wymaganie?

Answer 2

wierzę szukasz czegoś takiego:

draw(0); 
$('#range').on('change', function(){ 
    range = parseInt($(this).val()); 
    draw(range) 
}) 

function draw(val){ 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'), 
    x = 100, 
    y = 50, 
    d; 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    d = Math.sqrt(Math.pow(val,2) + Math.pow(50,2)); 

    context.beginPath(); 
    context.lineWidth = 1; 

    context.arc(x,y+val,d,0,2*Math.PI); 

    // line color 
    context.strokeStyle = 'black'; 
    context.stroke(); 

    // Cut off the top of the circle. 
    context.clearRect(0, 0, canvas.width, y); 

    // This stuff's just to show some dots 
    context.fillStyle = 'red'; 
    context.fillRect(x-1,y-1,2,2); // Middle 
    context.fillRect(x-52,y-2,4,4);//Target point 1 
    context.fillRect(x+48,y-2,4,4);// Target point 2 

    context.fillRect(x-2,y+d+val-2,4,4); // Point on circle 
    context.fillStyle = 'black'; 
} 

Working sample

Istnieje kilka wad jest to, że robi się „wolniej” im bliżej do kręgu , ponieważ koło staje się wykładniczo większe w ukrytej sekcji (suwak kontroluje jego rozmiar), i że nie działa dla linii ukośnych, jak jest teraz.

Poza tym działa tak, jak powinien.