Zeichnen von Bezier-Kurven mit den Tutorial-Tipps von canvas_html5

1. Quadratische Bézier-Kurve

QuadraticCurveTo(cpx,cpy,x,y) //cpx, cpy repräsentiert die Koordinaten des Kontrollpunkts, x, y repräsentiert die Endpunktkoordinaten;

Die mathematische Formel wird wie folgt ausgedrückt:

Der Pfad der quadratischen Bezier-Kurve wird durch die Funktion B (

t) anhand der Punkte P0, P1, P2 verfolgt:

Codebeispiel:

Code kopierenDer Code lautet wie folgt:

< ;script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//Zeichnungsstartpunkt , Kontrollpunkt, Endpunkt
context.beginPath();
context.moveTo(20,170);
context.lineTo(180,150); .Stroke();

//Eine quadratische Bezier-Kurve zeichnen
context.beginPath();
context.moveTo(20,170);
context.StrokeStyle = " red";
context.Stroke();
}






Codeeffekt:

2. Kubische Bézier-Kurve

BezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) //cp1x, cp1y repräsentiert die Koordinaten des ersten Kontrollpunkts, cp2x, cp2y repräsentiert die Koordinaten des zweiten Kontrollpunkts, x, y repräsentiert die Koordinaten von der Endpunkt ;

Die mathematische Formel wird wie folgt ausgedrückt:

Die vier Punkte P0, P1, P2 und P3 definieren eine kubische Bezier-Kurve auf einer Ebene oder in einem dreidimensionalen Raum. Die Kurve beginnt bei P0 und geht zu P1 und von P2 nach P3. Im Allgemeinen passiert es weder P1 noch P2; diese beiden Punkte dienen lediglich der Bereitstellung von Richtungsinformationen. Der Abstand zwischen P0 und P1 bestimmt, „wie lange“ die Kurve in Richtung P2 geht, bevor sie in Richtung P3 abbiegt.

Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

< h1>dreifache Bezier-Kurve

< script> ;
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//Startpunkt zeichnen, steuern point , end point
context.beginPath();
context.moveTo(25,175);
context.lineTo(150,30); context. lineTo(170,150);
context.stroke();

//Zeichne eine kubische Bezier-Kurve
context.beginPath();
context.moveTo(25,175);
context .StrokeStyle = "red";
context.Stroke();
}

Rendu du code :

N'est-ce pas un effet sympa ? . . Le canevas HTML5 est vraiment une chose amusante et addictive.