この記事では、主に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。グラフィックの組み合わせコードをコピーします