描画画像: drawImage(oImg,x,y)、oImgはImageオブジェクトであり、(x,y)は描画開始点であり、描画画像のサイズはソースマップのサイズと同じである. drawImage(oImg,x,y,w,h)は、後の2つのパラメータで描画後のグラフィックサイズを設定します. drawImage(oImg,x 1,y 1,w 1,h 1,x 2,y 2,w 2,h 2)は、ソース画像の一部を取得して描画し、描画開始点と描画後の画像の大きさを指定する方法であり、x 1/y 1/w 1/h 1は、選択したソースマップ上(x 1,y 1)の幅w 1の高さh 1をポイントした部分を表し、x 2/y 2/w 2/h 2は、選択した部分をキャンバス(x 2,y 2)に描画した場所を表し、幅w 2/h 2である. グラデーション線形グラデーションcreateLinearGradient(x 1,y 1,x 2,y 2)、4つのパラメータはそれぞれ始点と重点の座標を表します. ラジアルグラデーションcreateRadialGradient(x 1,y 1,r 1,x 2,y 2,r 2)、6つのパラメータはそれぞれ2つの円の中心と半径を表す. 以上の2つの方法でグラデーションオブジェクトを作成した後、addStopColor()を使用してカラースケールを指定します.このメソッドは、スケールの位置と色の2つのパラメータを受信します. 最後にグラデーションオブジェクトをfillStyleまたはstrokeStyleに割り当てるとグラデーション効果が描画されます. モード式:createPattern(oImg,repeatStyle)、oImgはimg要素であり、repeatStyleは文字列であり、繰り返し方を表し、オプション値はスタイルの背景の繰り返しと同様に、「repeat」、「repeat-x」、「repeat-y」、「no-repeat」を含む. モードの最初のパラメータは、ビデオ要素、または別のcanvas要素であってもよい. 注:モードはグラデーションと同じで、キャンバスの原点(0,0)から始まり、スタイルの塗りつぶしをモードオブジェクトに設定し、特定の領域内に重複した画像を表示するだけで、ある位置から重複した画像を描くのではなく、特定の領域内に重複した画像を表示します.次のようになります.1 var pattern = oContext.createPattern(oImg,0,0);
2 oContext.fillStyle = pattern;
3 oContext.fillRect(20,20,100,100);
最初の行と最初の列の画像が不完全に表示され、上と左の20画素が少なくなったのは、画像が矩形の原点から繰り返されるのではなく、キャンバスの原点から繰り返されるからだ. 描画テキスト fontプロパティは、テキストのスタイル、サイズ、フォントを設定します.ここで、フォントは必須です.例えば「16 px arial」. textAlign:テキストの水平位置合わせ方式、オプション値はstart/end/center/left/right;start/endを推奨します. textBaseLine:テキストの垂直配置、デフォルトalphabetic、オプション値はtop/bottom/middle/alphabetic/ideographic/hangingです. テキストを描くのと同じように、fillText()、strokeText()の2つの方法があります.この2つの方法は4つのパラメータを受信する:str/x/y/max Width;maxWidthは最大幅で、テキストの長さの大きさが一致すると値が収縮します. mesureText(str):このメソッドは、描画するテキストstrの幅を測定することができ、このメソッドはテキスト幅であるTextMetricオブジェクトを返します. シャドウ shadowColorシャドウカラーを設定します.デフォルトでは透明な黒です.そのため、このアトリビュートを設定しないとシャドウ効果が表示されます. shadowOffsetXシャドウのx方向のオフセット量を指定します.デフォルトは0です. shadowOffsettYシャドウのy方向のオフセット量を指定します.デフォルトは0です. shadowBlur指定ブラーのピクセル数を設定します.デフォルトは0です.ブラーはありません.