JavaScriptで曲線を描く方法

インターネット技術の継続的な発展により、JavaScript は最も人気のあるプログラミング言語の 1 つになりました。フロントエンド開発では、JavaScript によって豊富な描画ツールとライブラリが提供され、Web ページ上でさまざまな描画操作を実行できるようになります。その中でも、曲線を描くことは非常に一般的な操作であり、JavaScript はこの目的を達成するために多くの便利な関数やメソッドも提供します。次に、JavaScript で曲線を描く方法を学びましょう。

1. ベジェ曲線

ベジェ曲線は、曲線を描く最も一般的な方法の 1 つです。 1 つまたは複数の制御点で接続された曲線です。 JavaScript では、キャンバス描画 API を使用してベジェ曲線を描画できます。次は 2 次ベジェ曲線の描画例です:

// 创建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();

上記のコードでは、最初にキャンバス要素を作成し、その幅を High に設定します。ブラウザウィンドウのサイズに合わせてください。次に、キャンバス コンテキスト オブジェクトを取得することで、キャンバス API を使用して必要なグラフィックを描画できます。この例では、ベジェ曲線の始点と終点、および中間の制御点を設定して、2次ベジェ曲線を作成します。

ctx.quadraticCurveTo(cx, cy, x2, y2); 関数では、変数 cx と cy はベジェ曲線の中央にある制御点の座標を表し、x2 と y2 は座標を表しますベジェ曲線の終点。

二次ベジェ曲線に加えて、ctx.bezierCurveTo() 関数を使用して高次のベジェ曲線を作成することもできます。以下は、3 次ベジェ曲線を描画する例です。

// 创建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();

上記のコードでは、ctx.bezierCurveTo() 関数を使用して、4 つの点で構成される 3 次ベジェ曲線を作成します。さまざまな制御点を設定することで、さまざまな複雑な曲線を作成できます。

2. B スプライン曲線

B スプライン曲線も曲線を描く方法の 1 つです。一連の制御点と基底関数から構成される曲線であり、滑らかな曲線を生成できます。 JavaScript では、キャンバス描画 API を使用して B スプライン曲線を描画することもできます。以下は、2 次 B スプライン曲線を描画する例です。

// 创建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');

// 设置JavaScriptで曲線を描く方法的起点和终点
var x0 = 0, y0 = 0;
var x3 = 500, y3 = 500;

// 设置JavaScriptで曲線を描く方法的中间控制点
var c1 = {x: 200, y: 100};
var c2 = {x: 300, y: 400};

// 开始绘制JavaScriptで曲線を描く方法
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, x3, y3);
ctx.stroke();

上記のコードでは、ctx.bezierCurveTo() 関数を使用して B スプライン曲線を作成します。この例では、制御点を x 座標と y 座標を含むオブジェクトとして表していることに注意してください。

B スプライン曲線の制御点を変更することで、次の図に示すように、さまざまな曲線を作成できます。

3. SVG 曲線

SVG (Scalable Vector Graphics) は、美しいグラフィックスやアニメーション効果を作成するために使用できる XML ベースのベクター グラフィックス形式です。 SVG では、 要素を使用して曲線を描くことができます。以下は、二次ベジェ曲線を描画するための SVG コード例です:

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

上の例では、 要素を使用して曲線を作成しました。パスデータにおいて、「M 100 100」はパスの始点を表し、「Q 300 200 500 500」は二次ベジェ曲線の制御点と終点を表します。このうち「Q」は2次ベジェ曲線であることを示します。

パスデータを変更することで、以下の図に示すように、さまざまな曲線を作成できます。

概要

以上です。この記事では、JavaScript で曲線を描くいくつかの方法を紹介します。 JavaScript のキャンバス描画 API を使用してベジェ曲線や B スプライン曲線を描画したり、SVG を使用して曲線を描画したりすることで、さまざまな複雑で美しい曲線を簡単に作成できます。これらの描画テクニックを練習して研究することで、Web ページにより鮮やかで豊かな視覚効果をもたらすことができます。

以上がJavaScriptで曲線を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。