<canvas id="canvas" width="400" height="400">canvas wird nicht unterstützt</canvas>
<script src="../include/utils.js"></script>
<script>
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
var i1=0.1;
var i2=0.24;
var y1, x1, y2, x2 , x3, y3;
function drawFrame () {
window.requestAnimationFrame(drawFrame);
x1=Math.sin(i1 += 0.09)*50+20;
y1=Math.cos(i1) *50+100;
x2=Math.cos(i2 += 0.08)*80+200;
y2=Math.sin(i2) *80+260;
x3=x2-(x2-x1)/2;
y3=y2-(y2-y1)/2;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(120,20);
context.quadraticCurveTo(x1,y1,x3,y3);
context.quadraticCurveTo(x2,y2,120,400);
context.stroke();
};
drawFrame();
</script>
Siehe dazu w3schools Referenzen canvas/ quadratic curve
Siehe dazu auch meinen Actionscript 3 Tipp draw Kurven und meinen AS2 Tipp Trigonometrie
In meinem Trigonometrie Tipp AS2 wird erklärt, wie man eine kreisförmige Bewegung mit Sinus und Cosinus erzeugt.
x1=Math.sin(i1 += 0.02)*50+20;
y1=Math.cos(i1) *80+100;
Es werden x und y Position eines Punktes berechnet. Dabei wird eine Variable i1 bei jedem Durchlauf um einen Betrag erhöht. Math.sin() und Math.cos() erzeugen daraus eine Zahl von -1 bis +1. Multipliziert man diesen Wert mit einem Durchmesser kann man so die Breite (x) und Höhe (y) bestimmen. Die Addition bestimmt den Mittelpunkt. Somit wird im obigen Beispiel eine Elipse mit einer Breite von 50 und Höhe von 80 und einem Mittlpunkt x=20 und y=100 erzeugt.