この記事では、主にCanvasの24の基本知識の概要を紹介します。これは非常に包括的で詳細であり、すべての人に推奨されています。
次に、キャンバスの知識ポイントを次のように要約して、いつでも読むことができるようにします。
1.長方形の充填（x、y、幅、高さ）を埋める。 2。長方形の境界線ストラカレクト（x、y、幅、高さ）を描画します。 3.長方形のclearRect（x、y、幅、高さ）を消去します。 4。充填剤=赤;スタイルは、色、グラデーション、イメージです。 5。STROKESTYLE = RED; 6.ストロークラインライン幅の幅= 4; 7。線の端の形状linecap = butt;バット（ドッキング）/丸い（円）/正方形（正方形）、デフォルトではバットです。 8。ライン交差点LineJoin = Miter;マイター（シャープコーナー）/丸い（丸い角）/ベベル（ベベルコーナー）、デフォルトのシャープコーナー。 9。パスのbeginpath（）を描画し始めます。 10。パスclosepath（）を終了します。パスを作成した後、パスの開始点に接続された線を描画する場合は、ClosePath（）を呼び出すことができます。 11。アークアークを描画（x、y、radius、startangle、endangle、true/false）; 12.描画arc arcto（x1、y1、x2、y2、radius）は、前のポイントからx2、y2、および与えられた半径でx1、y1を通過するまで1日の弧を描き始めます。 13。Moveto（x、y）;線を描画せずに、描画カーソルを（x、y）に移動します14。Lineto（x、y）;前のポイントから直線を描きます15.二次皮肉の曲線：四肢（cx、cy、x、y）; x、y、cx、cyが制御点として機能するまで、前のポイントから二次曲線を描画し始めます。 16.キュービックベジエカーブ：Beziercurveto（Cx1、Cy1、Cx2、Cy2、X、Y）; x、y、cx1、cy1、cx2が制御ポイントとして使用されるまで、前のポイントから二次曲線を描画し始めます。 17。rect（x、y、幅、高さ）;ポイントx、y、および幅と高さから開始します。幅と高さはそれぞれ指定されます。この方法は、個別の形状ではなく、長方形の経路を描きます。 18。テキストを描く：（1）塗りつぶしテキスト：filltext（hello、x、y、width）;幅はオプションの最大ピクセル幅です。テキストが最大幅よりも大きい場合、テキストは縮小して最大幅に対応します。
（2）テキストストローク：stroketext（hello、x、y、width）;幅はオプションの最大ピクセル幅です。
（3）テキストスタイル：font = bold 14px arial;
（4）水平テキストアライメント：textAlign = 'start'; // start、end、左、右、中央。デフォルト値：開始。テキストの垂直軸をベースポイントとしての開始点（x、y）に合わせます。
（5）垂直テキストアライメント：TextBaseLine = 'Alphabetic'; // Top、Hanging、Middle、Alphabetic、IdeaGraphic、Bottom。デフォルト値：アルファベット。テキストの水平軸をベースポイントとしての開始点（x、y）に合わせます。
（6）テキスト幅：var text = hello; var length = context.measureText（テキスト）;パラメーターテキストは、描画する必要があるテキストです
19。変更
（1）回転（角度）：原点の周りの画像の角度ラジアンを回転させます。
Transform（math.cos（angle*math.pi/180）、math.sin（angle*math.pi/180）、 - math.sin（angle*math.pi/180）、math.cos（angle*math.pi/180）、0,0）を使用することもできます。
（2）スケール（x、y）：画像をスケーリングします。変換（x、0,0、y、0,0）を使用することもできます。
（3）翻訳（x、y）：座標起点をx、yに移動します。この変換を実行した後、座標0と0はx、yの前に表されるポイントになります。変換（1,0,0,1、x、y）を使用することもできます。
（4）変換（<number>、<number>、<number>、<number>、<number>、x、y）;
（5）SetTransform（<number>、<number>、<number>、<number>、x、y）;変換マトリックスをデフォルトの状態にリセットし、transform（）を呼び出します。
20。グラフィックの組み合わせコードをコピーします