チュートリアルキャンバス（C）は、プロット

後は直線を描くキャンバスのチュートリアル（b）は、私たちは、キャンバスが描かれた直線である方法を知っています

この時間は、私たちに曲線に関連する図面を与えることです

円を描きます

キャンバスでは、円を描くようにアーク法を使用することができます

context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();

私たちは、にbeginPathとclosePathこれらの2つの方法を使用する最初のものである、という名前の最初の2つの方法では、イタリアが、それは一般的に一緒に使用され始めとパスパスの最後だと思います。

XおよびYで表される方法のアークのパラメータは、中心の座標であるため、rは円手段の半径であり、startRadian endRadian角度を指し、開始および終了角度

注意：这里是以弧度为单位的！

1π180度に等しいので、我々は一般的に書かれているここに書くとき、度数*Math.PI/180どのくらいの程度私たちが一目で見るのを助けるために

antclockwiseは、それが反時計回りに描かれているかどうかを意味し、デフォルトはfalseです

友人が言う、私はそれを試してみました、それがどのように、何の効果ああ、この3を書いたん？それはわずか3でパスを記述しているので影響は、ポジティブではありません！描画されませんでした！だから私たちは過ごすことができ、直線の描画に使用される「ストローク」strokeまたは「塗りつぶし」fill

ストロークの三角形：

context.beginPath();
context.arc(x, y, r, startRadian, endRadian, antclockwise);
context.closePath();
context.strokeStyle = '颜色值';
context.stroke();
//描边 填充fill 同理  就不写了

弧を描きます

その後、弧を描くどのように行う、友人たちはただ、円弧の曲率を持っていることを発見したアークは、円の一部である、
弧を結ぶ直線がある二つの間だけのポイントを、その後、私はその円弧を取り除くには、直線ではありませんそれの？ビンゴ！このように、限り、あなたはclosePathを削除すると、あなたが2333の弧を描くことがわかります

さて、次に実際キャンバス、塗装アークarcTo（X1、Y1、X2、Y2、半径）の方法があります。

我々は、3点の座標を提供する必要があり、arcToにより曲線を描きたい起点が一般のmoveToとのlineToのによって提供さ
れるX1とY1 の制御点、X2およびY2は終点、半径は、円弧の半径

現在のエンドポイントとarcTo角度（）メソッドは、エンドポイント1（x1、y1）と3点の形成2（X2、Y2）の終点

次に半径の円に角部の側面とアークタンジェントの半径を描きます

アークの開始点は、現在のエンドポイントである場合、円の接点のエッジ

アークの端部は、円の接点の側面、及びアークは、2つのタンジェントポイント間の最短円弧を描かれている場合、エンドポイント2（X2、Y2）です。

如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。

私は絵を描きました。

エヘンは、画家、おそらくケースを気にしないで、私たちの出発点は、現在のポイントがarcToを使用する前にポイントされている
次のコードは、私は2つの矛盾した一貫性の出発点と例の出発点を書いたかを示して

    context.moveTo(50, 50);
    context.lineTo(150, 50);
    ctx.arcTo(200,50, 200,100, 50);
    ctx.stroke();

    context.moveTo(50, 50);
    ctx.arcTo(200,50, 200,100, 50);
    ctx.stroke();

同じ結果を見つけることはありません！

違いはそれを味わうためにある場合には、数学を修復することができます

ベジェ曲線を描きます

百度百科：贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。

ベジェ曲線はおよそここで、我々は二次ベジェ曲線描画キャンバスを指示方法については、ない話をした直線であるので、あなたのすべての詳細は、それを検索します

二次ベジェ曲線

cnavasメソッドによりquadraticCurveTo（X1、Y1、X2、提供 Y2）、パラメータX1とY1は前記制御点、X2およびY2であるエンドポイントを

出発点は、メソッドを呼び出す前に、ポイントであります

アクションフィギュアは、私が描きませんが、私はオンラインで見つける前に：

context.strokeStyle = 'red';
context.beginPath();
context.moveTo(0, 150);
context.quadraticCurveTo(75, 50, 200, 100);
context.stroke();
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(75, 50);
context.lineTo(0, 150);
context.moveTo(75, 50);
context.lineTo(200, 100);
context.stroke();

タグのパフォーマンス：

キュービックベジェ曲線

立方ベジェ曲線法がいるbezierCurveTo（X1、Y1、X2、Y2、X3、Y3）であります

パラメータX1、Y1、X2、Y2である場合、コントロールポイント、X3とY3があるエンドポイントは、
コントロールの追加ポイントを提供することです！

ペイントは、次のように動作します。

この例では、練習する、二次ベジェ曲線の例を輝いて、書いてはいけません！

終了

音声：円を描く、弧を描き、二次ベジェ曲線を、次ベジェ曲線は、我々はどのくらいのことを学びましたか？

さて、ここで、このチュートリアルが終わると、次の時間は、動作ラインとテキストの皆をもたらします