Kwadratowa krzywa Béziera
Aby narysować kwadratową krzywą Béziera musimy podać współrzędne trzech punktów:
- współrzędne punktu początkowego krzywej
- współrzędne punktu kontrolnego
- współrzędne punktu końcowego krzywej
A oto krzywa rozciągająca się między punktami (140,200), (340, 200) z punktem kontrolnym w pozycji (240,10).
Listing
var cv = document.getElementById("canvas"); var ctx = cv.getContext("2d"); ctx.beginPath(); ctx.moveTo(140, 200); ctx.quadraticCurveTo(240, 10, 340, 200); ctx.lineWidth = 2; ctx.strokeStyle = 'blue'; ctx.stroke(); ctx.beginPath(); fillStyle="blue"; ctx.arc(140, 200, 3, 2*Math.PI, 0, false); ctx.fill(); ctx.beginPath(); fillStyle="blue"; ctx.arc(340, 200, 3, 2*Math.PI, 0, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(240, 10, 3, 2*Math.PI, 0, false); ctx.fill();