HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML canvas bezierCurveTo() メソッド

bezierCurveTo() は Canvas 2D API は三次ベセル曲線のパスを描画する方法です。このメソッドは3つのポイントが必要です。最初、第二のポイントは制御ポイントであり、第三のポイントは終了ポイントです。開始ポイントは現在のパスの最後のポイントであり、 moveTo() を呼び出して変更できます。

HTML canvas リファレンスマニュアル

オンラインサンプル

三次ベセル曲線を描画する：

サンプル

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　bezierCurveTo()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML をサポートしていません。5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari が bezierCurveTo() をサポートしています。メソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 元素をサポートしていません。

定義と使用法

bezierCurveTo() メソッドは、三次ベ塞尔曲線を表す指定された制御点を使用して、点を現在のパスに追加します。

三次ベジェ曲線は3つの点が必要です。前2つの点は三次ベジェ計算の制御点であり、第3つの点は曲線の終了点です。曲線の始点は現在のパスの最後の点です。パスが存在しない場合、このメソッドを使用してください。 beginPath() および moveTo() 始点を定義するためのメソッドです。

始点：

moveTo(20,20)

制御点 1：

bezierCurveTo(20,100,200,100,200,20)

制御点 2：

bezierCurveTo(20,100,200,100,200,20)

終了点：

bezierCurveTo(20,100,200,100,200,20)

ヒント：参照してください quadraticCurveTo() メソッド。2つの制御点ではなく1つの制御点を持っています。

JavaScript 文法：	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

パラメータの値

パラメータ	説明
cp1x	第1のベジェ制御点の x 座標。
cp1y	第1のベジェ制御点の y 座標。
cp2x	第2のベジェ制御点の x 座標。
cp2y	第2のベジェ制御点の y 座標。
x	終了点の x 座標。
y	終了点の y 座標。

HTML canvas リファレンスマニュアル

HTML: <template> タグ