Comment dessiner une courbe en javascript

Avec le développement continu de la technologie Internet, JavaScript est devenu l'un des langages de programmation les plus populaires. Dans le développement front-end, JavaScript nous fournit une multitude d'outils de dessin et de bibliothèques, nous permettant d'effectuer diverses opérations de dessin sur des pages Web. Parmi elles, dessiner une courbe est une opération très courante, et JavaScript nous fournit également de nombreuses fonctions et méthodes utiles pour atteindre cet objectif. Apprenons ensuite à dessiner des courbes en JavaScript.

1. Courbe de Bézier

La courbe de Bézier est l'une des façons les plus courantes de dessiner des courbes. C'est une courbe reliée par un ou plusieurs points de contrôle. En JavaScript, nous pouvons utiliser l'API de dessin de canevas pour dessiner des courbes de Bézier. Voici un exemple de dessin d'une courbe de Bézier quadratique :

// 创建canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取canvas的上下文对象
var ctx = canvas.getContext('2d');

// 设置Bezier曲线的起点和终点
var x1 = 100, y1 = 100;
var x2 = 500, y2 = 500;

// 设置Bezier曲线中间的控制点
var cx = 300, cy = 200;

// 开始绘制Bezier曲线
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(cx, cy, x2, y2);
ctx.stroke();

Dans le code ci-dessus, nous créons d'abord un élément de canevas et définissons sa largeur et sa hauteur pour s'y adapter. navigation La taille de la fenêtre du navigateur. Ensuite, en obtenant l'objet contextuel canevas, nous pouvons utiliser l'API canevas pour dessiner les graphiques dont nous avons besoin. Dans cet exemple, nous créons une courbe de Bézier quadratique en définissant le point de départ et le point final de la courbe de Bézier, ainsi que les points de contrôle au milieu.

Dans la fonction ctx.quadraticCurveTo(cx, cy, x2, y2); les variables cx et cy représentent les coordonnées du point de contrôle au milieu de la courbe de Bézier, tandis que x2 et y2 représentent les coordonnées du point final. de la courbe de Bézier.

En plus des courbes de Bézier quadratiques, nous pouvons également utiliser la fonction ctx.bezierCurveTo() pour créer des courbes de Bézier d'ordre supérieur. Voici un exemple de dessin d'une courbe de Bézier cubique :

// 创建canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取canvas的上下文对象
var ctx = canvas.getContext('2d');

// 设置Bezier曲线的起点和终点
var x1 = 100, y1 = 100;
var x2 = 500, y2 = 500;

// 设置Bezier曲线中间的控制点
var cx1 = 300, cy1 = 200;
var cx2 = 400, cy2 = 400;

// 开始绘制Bezier曲线
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
ctx.stroke();

Dans le code ci-dessus, nous utilisons la fonction ctx.bezierCurveTo() pour créer une courbe de Bézier cubique composée de quatre points. En définissant différents points de contrôle, nous pouvons créer diverses courbes complexes.

2. Courbe B-spline

La courbe B-spline est également une méthode de dessin de courbes. Il s'agit d'une courbe composée d'un ensemble de points de contrôle et d'une fonction de base, qui peut produire une courbe lisse. En JavaScript, nous pouvons également utiliser l'API de dessin de canevas pour dessiner des courbes B-spline. Voici un exemple de dessin d'une courbe B-spline quadratique :

// 创建canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取canvas的上下文对象
var ctx = canvas.getContext('2d');

// 设置Comment dessiner une courbe en javascript的起点和终点
var x0 = 0, y0 = 0;
var x3 = 500, y3 = 500;

// 设置Comment dessiner une courbe en javascript的中间控制点
var c1 = {x: 200, y: 100};
var c2 = {x: 300, y: 400};

// 开始绘制Comment dessiner une courbe en javascript
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, x3, y3);
ctx.stroke();

Dans le code ci-dessus, nous utilisons la fonction ctx.bezierCurveTo() pour créer une courbe B-spline. Notez que dans cet exemple, nous représentons les points de contrôle comme des objets contenant des coordonnées x et y.

En modifiant les points de contrôle de la courbe B-spline, nous pouvons créer une variété de courbes, comme le montre la figure ci-dessous :

3 courbe SVG

SVG (Scalable Vector Graphics) est un XML-. Format graphique vectoriel basé sur qui peut être utilisé pour créer de superbes graphiques et effets d'animation. En SVG, nous pouvons utiliser l'élément Voici un exemple de code SVG pour dessiner une courbe de Bézier quadratique :

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <path d="M 100 100 Q 300 200 500 500" fill="none" stroke="black" stroke-width="2" />
</svg>

Dans l'exemple ci-dessus, nous avons utilisé l'élément Dans les données de trajet, « M 100 100 » représente le point de départ du trajet et « Q 300 200 500 500 » représente les points de contrôle et les points d'arrivée d'une courbe de Bézier quadratique. Parmi eux, « Q » indique qu'il s'agit d'une courbe de Bézier quadratique.

En modifiant les données du chemin, nous pouvons créer diverses courbes, comme le montre la figure ci-dessous :

Résumé

Ce qui précède présente plusieurs façons de dessiner des courbes en JavaScript. Que ce soit en utilisant l'API de dessin de canevas de JavaScript pour dessiner des courbes de Bézier et des courbes B-spline, ou en utilisant SVG pour dessiner des courbes, nous pouvons facilement créer une variété de courbes complexes et magnifiques. En pratiquant et en étudiant ces techniques de dessin, nous pouvons apporter des effets visuels plus vifs et plus riches à nos pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!