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

HTML タグ一覧

HTML canvas quadraticCurveTo() メソッド

quadraticCurveTo() は Canvas 2D API は二次ベセル曲線のパスメソッドを追加しました。これは2点があります。最初の点是制御点、二つ目の点是終点です。開始点是現在のパスの最新の点で、二次ベセル曲線を作成する前に 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>
あなたのブラウザは HTML5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

テストをしてみてください ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome および Safari は quadraticCurveTo() をサポートしています。方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定義と使用法

quadraticCurveTo() メソッドを使用して、二次ベジェ曲線を表す指定された制御ポイントを使用して、現在のパスにポイントを追加します。

二次ベジェ曲線には2つのポイントが必要です。最初のポイントは二次ベジェ計算に使用される制御ポイントであり、次のポイントは曲線の終端ポイントです。曲線の開始ポイントは現在のパスの最後のポイントです。パスが存在しない場合、 beginPath() および moveTo() メソッドを使用して開始点を定義します。

開始点：

moveTo(20,20)

制御点：

quadraticCurveTo(20,100,200,20)

終端点：

quadraticCurveTo(20,100,200,20)

ヒント：参照してください bezierCurveTo() メソッド。それには2つの制御点があり、1つではありません。

JavaScript 语法：	context.quadraticCurveTo(cpx,cpy,x,y);

パラメータの値

パラメータ	説明
cpx	ベジェ制御点の x 座標。
cpy	ベジェ制御点の y 座標。
x	終端点の x 座標。
y	終端点の y 座標。

HTML canvas 参考マニュアル

HTML: <template> タグ