Dessiner des courbes de Bézier à l'aide des astuces du didacticiel canvas_html5

1. Courbe de Bézier quadratique

QuadraticCurveTo(cpx,cpy,x,y) //cpx, cpy représente les coordonnées du point de contrôle, x, y représente les coordonnées du point final

La formule mathématique s'exprime comme suit :

Le chemin de la courbe quadratique de Bézier est tracé par la fonction B (t) étant donné les points P0, P1, P2 :

Exemple de code :

Copier le code

Le code est le suivant :

< ;script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//Point de départ du dessin, point de contrôle, point final
context.beginPath();
context.moveTo(20,170);
context.lineTo(130,40); .AVC();

//Dessinez une courbe de Bézier quadratique
context.beginPath();
context.moveTo(20,170);
context.quadraticCurveTo(130,40,180,150); rouge";
context.AVC();
}






Effet de code :

2. Courbe de Bézier cubique

BezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) //cp1x, cp1y représente les coordonnées du premier point de contrôle, cp2x, cp2y représente les coordonnées du deuxième point de contrôle, x, y représente les coordonnées de le point final ;

La formule mathématique s'exprime comme suit :

Les quatre points P0, P1, P2 et P3 définissent une courbe de Bézier cubique sur un plan ou dans un espace tridimensionnel. La courbe part de P0 et va à P1, et de la direction de P2 à P3. Généralement, il ne passera pas par P1 ou P2 ; ces deux points sont simplement là pour fournir des informations directionnelles. La distance entre P0 et P1 détermine « combien de temps » la courbe va dans la direction de P2 avant de tourner vers P3.

Exemple de code :

Copier le code

Le code est le suivant :

< h1>trois fois la courbe de Bézier

< script> ;
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//Dessiner le point de départ, le contrôle point, point final
context.beginPath();
context.moveTo(25,175);
context.lineTo(60,80); contexte.lineTo(170,150);
contexte.AVC

//Dessinez une courbe de Bézier cubique
context.beginPath();
context.moveTo(25,175);
context.bezierCurveTo(60,80,150,30,170,150); = "rouge";
context.AVC();
}

コードのレンダリング:

素晴らしい効果だと思いませんか? 。 。 HTML5 キャンバスは本当に楽しくて、中毒性があります。