HTML5 Canvas API_html5 チュートリアルヒントを使用した円弧の描画に関するチュートリアル-H5 チュートリアル-php.cn

HTML5 Canvas API_html5 チュートリアルヒントを使用した円弧の描画に関するチュートリアル

WBOY

リリース： 2016-05-16 15:45:28

オリジナル

1870 人が閲覧しました

標準の円弧を描画します

始める前に、描画環境を最適化しましょう。この背景が気に入らない場合は、選択できる他の背景画像も提供しています。また、すべてのスタイルシートは

の下に記述されます。

JavaScript コードコンテンツをクリップボードにコピーします

"zh">
"UTF-8">

新しいキャンバス

"./images/bg3.jpg") 繰り返し }
#canvas { ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;
"キャンバスワープ">
<キャンバス id="キャンバス">
あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！！

<スクリプト

window.onload =

function(){

var Canvas = document.getElementById(

"canvas"); Canvas.width = 800; Canvas.height = 600; var

context = Canvas.getContext("2d"

); context.fillStyle =

"#FFF"; context.fillRect(0,0,800,600);

}

実行結果:
2016322110254564.jpg (850×500)

キャンバスを埋めるために空白の長方形を描画する必要がある理由は、前に述べたように、背景色が設定されていない場合、キャンバスは設定したテクスチャによって覆われてしまうためです。背景色（白）を持たせるには、キャンバスを覆う長方形を描くしか方法がないと思います。

とても素敵だと思いませんか？

円弧を描くには arc() を使用します
arc() の使用方法は次のとおりです。

JavaScript コードコンテンツをクリップボードにコピーします

context.arc(x,y,radius,startAngle,endAngle,反時計回り)

最初の 3 つのパラメータは、円の中心座標と円の半径です。 startAngle と endAngle では、角度値ではなくラジアン値が使用されます。以下の図に示すように、ラジアンの規制は絶対的です。
2016322110350997.jpg (600×425)

反時計回りは、時計回りに描くか反時計回りに描くかの描画方法を示します。ブール値を渡します。true は反時計回りに描画することを意味し、false は時計回りに描画することを意味し、デフォルト値は false です。

ラジアンの規定は絶対的ですとはどういう意味ですか?どのような円弧を描きたいのかということは、上記の基準に従って円弧を記入するだけです。

例えば、0.5pi～1piの円弧を描く場合、時計回りに描くと左下の1/4円弧のみとなり、反時計回りに描くと補数の3になります。 /4 右上隅の円弧。ここでは例を示さずに自分で試してみてください。

接点を使用して円弧を描きます

arcTo() の概要:
arcTo() メソッドは、2 つの接点の座標と円弧の半径である 5 つのパラメーターを受け取ります。この方法では、接線に基づいて円弧を描きます。つまり、円弧は 2 つの接線によって決まります。
詳細は以下の通りです。

JavaScript コードコンテンツをクリップボードにコピーします

arcTo(x1,y1,x2,y2,radius)

この関数は、指定された半径の円弧を描きます。円弧の始点は、現在のパスの位置から点 (x1, y1) までの直線に接します。点 (x1, y1) から点 (x2) , y2) は直線に接します。したがって、通常は moveTo() または lineTo() とともに使用されます。この機能は、描画メソッドでポイントカットを使用するため複雑である、より単純な arc() に置き換えることができます。

接点を使用して円弧を描画します:
次のケースでは、より明確に見えるように接線も描画しました。

JavaScript コードコンテンツをクリップボードにコピーします

"zh">
"UTF-8">
绘制弧线
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<スクリプト>

window.onload = 関数(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);

};

function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){

cxt.beginPath();

cxt.moveTo(x0, y0);

cxt.arcTo(x1, y1, x2, y2, r);

cxt.lineWidth = 6;

cxt.ストロークスタイル = "赤";

cxt.ストローク();

cxt.beginPath();

cxt.moveTo(x0, y0);

cxt.lineTo(x1, y1);

cxt.lineTo(x2, y2);

cxt.lineWidth = 1;

cxt.ストロークスタイル = "#0088AA";

cxt.ストローク();

}

このケースは、arcTo() のさまざまな重要なポイントの役割も示しています。より明確な説明のために、別の分析図をマークします。
2016322110502905.jpg (600×425)

ここで、arcTo() 描画の開始点は (x0, y0) ですが、(x0, y0) は必ずしも円弧の接点ではないことに注意してください。実際の arcTo() 関数は (x1, y1) と (x2, y2) のみを渡します。このうち (x1, y1) は制御点と呼ばれ、(x2, y2) は円弧の終点の接点であり、必ずしも円弧上にあるとは限りません。ただし、(x0, y0) は円弧上になければなりません。
少し複雑ですが、drawArcTo() 関数のパラメータを変更して試してみましょう。
(x2, y2) は必ずしも円弧上にあるとは限りません: