Convasで直接描画することはできず、この方法を使用して取得する必要があります。
次。
☆コンテキスト.beginpath（）新しいパス描画の開始を示します。
☆コンテキスト.ispointinpath（x、y）ポイントがパス上にあるかどうかを判断します。この方法は、座標系が変換された後も適用されません。
☆Context.Moveto（X、Y）図面からブラシを持ち上げ、図面を離れ、次に先端を配置するのと同等です。
（x、y）座標で、この新しい位置で新しい図面を開始します。
☆コンテキスト.lineto（x、y）これは、ブラシチップが図面を離れないのと同等であり、ブラシの先端は現在の座標位置から移動します
座標（x、y）で線セグメントを描画します。
☆Context.Stroke（）コンボに描画した後、いくつかの図面操作はこの方法を呼び出して、図面を内部にすることを許可する必要があります
コンテンツディスプレイ。
context.save（）この方法は、将来のコンボの変更に関係なく、コンボの現在の状態を保存します。
これらの変更を加える前にコンボス状態を保存するだけで、後で呼び出すことができます
Context.Restore（）メソッドは、保存された状態に復元されます。通常、新しいセクションに描画されます
または、操作を変更する前にコンボの元の状態を保存する必要があります（図面や変更は行われません
）、新しいドローまたは変更操作が完了した後、元の状態に復元します。これ
また、将来の描画操作を助長します。
実際、Canvasの2D描画環境コンテキストには多くのプロパティがあり、いくつかの方法があります
国家関連、各属性の値が変更されます（または、図面状態を変更するために何らかの方法が使用されます）、
描画状態が変わります。変更されるたびに保存された場合、プロパティの複数の状態が
スタックの形で保存すると、restore（）パーティーはスタックの順に複数回呼び出すことができます。
対応する保存された状態に戻ります。
context.translate（x、y）このメソッドは、現在の座標起点を（x、y）に移動します。
context.restore（）コンバス状態を最後の保存された状態に復元します。
context.closepath（）このコマンドは、Linetoとの動作が非常に似ています
機能、違いは目的地があるということです
自動的にであると想定されています
パスの起源。ただし、Closepathも通知します
現在の形状が閉じたり形成されたりしたキャンバス
完全に含まれた領域。これは将来に役立ちます
満たされたストローク。
この時点で、あなたはより多くのことを自由に続けることができます
追加のサブパスを作成するためのパスのセグメント。またはあなた
いつでも開始することができます。
完全にリストします。
context.fill（）;充填スタイルを設定した後、閉じたパスを埋めます。呼び出した後、この方法を呼び出す必要はありません
context.stroke（）メソッド。
context.fillRect（x、y、幅、高さ）長方形の領域を幅と長さ（幅、高さ）で（x、y）で描きます。調整する
この方法を使用した後、Context.Stroke（）メソッドを再度呼び出す必要はありません。
context.Strokerect（x、y、幅、高さ）（x、y）の幅と長さ（幅、高さ）で長方形の輪郭を描きます。
context.ClearRect（x、y、幅、高さ）クリーニング位置（長方形の左上隅）は（x、y、）にあり、サイズは（幅、高さ）です
長方形の領域。
長方形の領域からコンテンツを削除し、リセットします
オリジナルの透明な色に。
キャンバスの長方形をクリアする能力は、
HTML5キャンバスAPIを使用してアニメーションとゲームを作成します。による
キャンバスのセクションを繰り返し描画してクリアします
アニメーションの幻想を提示することは可能です、そして多く
この例はすでにウェブ上に存在しています。ただし、に
スムーズに機能するアニメーションを作成する必要があります
クリッピング機能、そしておそらく二次的な機能を活用してください
バッファリックされたキャンバスが原因となる点滅を最小限に抑えます
頻繁にキャンバスがクリアされます。
☆コンテキスト.drawimage（）この方法には、キャンバスに画像を描くための3つのオーバーロードがあります。画像ソースは可能です
ページ内のIMGタグの1つのフレーム、JSの画像オブジェクトとビデオ。
•context.drawimage（img、x、y）
（x、y）の画像IMGを使用して画像を描画します。キャンバスのサイズが画像よりも大きい場合
、画像全体が描画されます。画像がキャンバスよりも大きい場合、余分なものはトリミングされます。
•context.drawimage（img、x、y、w、h）
（x、y）で、画像IMGを使用して、長さと幅の長方形の領域を描画します（w、h）。画像
シーケンシャルのサイズは（w、h）に変更されます。
•context.drawimage（img、imgx、imgy、imgw、imgh、cx、cy、
CW、CH）
IMG画像を描画オブジェクトとして取ると、IMGの位置は（IMGX、IMGY
）サイズの領域（IMGW、IMGH）はキャンバス位置（CX、CY）に描かれています
サイズの面積（CW、CH）を描画します。
画像上の作物領域が画像範囲外である場合、例外がスローされます。
•Context.Drawimage（Video、VX、VY、VW、VH、CX、CY、CW、CH）
ビデオオブジェクトを描画オブジェクトとして使用し、ビデオの位置を（vx、vy
）サイズ（VW、VH）のフレームは、キャンバス（CX、CY）の位置に大きく描画されます
小さいエリア（CW、CH）。
さらに、DrawImage（）の最初のパラメーターも別のキャンバスにすることができます。
context.getimagedata（x、y、幅、高さ）この方法では、キャンバス内の位置からサイズ（幅、高さ）を取得します（x、y）
ピクセル領域、戻り値はイメージタタオブジェクトです。イマゲタタには幅があり、
高さとデータ。
データ属性はピクセルの配列であり、配列内の4つの連続した要素それぞれが画像を表します
、4つの連続した要素には、RGBAの色と透明性情報が含まれています。 4つの連続した要素
ピクセルはピクセルに属し、最初の要素の位置は自由にとられていません。
ピクセル配列は、上から下、左から右へのキャンバス順序で指定されています。
スキャンして取得します。ピクセル配列内の要素の数は幅 *高さ *4。特定のものを取得するには
場所のピクセル情報。
ローカルファイルモードでこの方法を使用してWebページを開くと、それは正常ではありません
通常、セキュリティエラーが発生します。ファイルをアップロードできます
Webサーバーは、この問題を解決するためにアクセスを要求します。そして、関係する画像、JSと
HTMLは同じドメイン名からのものでなければなりません。ただし、IE9はローカルファイルを介してアクセスできます。
例は次のとおりです。
コードをコピーします