なぜ別のガイドですか？
既存のマニュアルのほとんどは基本のみを考慮しており、他のすべてはバラバラに組み立てる必要があるため、プログラマー向けに簡潔で完全なキャンバスガイドを作成することにしました（または、プログラミングを同時に勉強する一般の人向けに書くこともよくあります）。
検索エンジンからこのページに来ました
キャンバス要素
キャンバス要素の名前は「canvas」（だれが考えたでしょうか）と属性「width」および「height」を持ち、これらの属性はCSSに関連していないことに注意してください。画面上ではなくピクセルでキャンバス要素の幅と高さを示し、ただし、キャンバスの座標平面上。 また、タグ内のテキストは、キャンバスをサポートするブラウザーでは無視され、キャンバスをサポートしないブラウザーで表示されます。
このチュートリアルの後半では、次の空白を使用します。
<!doctype html> <html> <head> <title> </title> </head> <body> <canvas id="cnv" width="600" height="600"> </canvas> <script type="text/javascript" src='your_file.js'></script> </body> </html>
キャンバスへの描画は、引数「2d」を指定してgetContext要素のcanvasメソッドを呼び出すことで取得できるコンテキストを介して行われます。
したがって、スクリプトに行を追加します。
var ctx = document.getElementById('cnv').getContext('2d')
長方形
キャンバスの長方形が唯一のプリミティブです。 長方形を操作する方法は3つしかありません。
長方形を塗りつぶす
fillRect-塗りつぶされた長方形を描画し、引数を検討する
fillRect(float x, float y, float w, float h)
ここで、xとyは左上隅の座標、wとhはそれぞれ幅と高さです。 例を見てみましょう。 スクリプトに行を追加します。
ctx.fillRect(200, 250, 200, 100)
多くの人が推測しているように、実行後、幅200ピクセル、高さ100ピクセルの長方形がキャンバスの中央に描画されます。
円形の長方形
strokeRect-fillRectと同じように機能しますが、それとは異なり、四角形を塗りつぶさず、輪郭のみを描画します。 スクリプトに行を追加します。
ctx.strokeRect(150, 200, 300, 200)
次に、塗りつぶされた長方形の周りに、別の長方形の輪郭を描きました。
長方形をクリアする
clearRect-同じ引数を取りますが、その兄弟とは異なり、描画しませんが、何も描画しなかったかのように、以前のすべてを破壊します。 塗りつぶされた長方形の一部を削除しましょう、
これを行うには、スクリプトに次の行を追加します。
ctx.clearRect(350, 300, 50, 50)
したがって、塗りつぶされた長方形の一部を切り取ります。
方法
長方形とは異なり、パスを描画したり塗りつぶしたりするには、いくつかのアクションを実行する必要があります。簡単にするために、主要なメソッドを検討し、数ステップで完成した結果を取得してから、検討したメソッドのベースを増やします。 始めるために、スクリプトをきれいにして、コンテキストの取得のみを残しましょう。
道を始める
パスを作成する最初のステップは、beginPathメソッドを呼び出すことです。これを呼び出した後、特別なリストに格納されたサブパス（曲線、行）を追加し、beginPathを呼び出すたびにこのリストをリセットします。 スクリプトに次の行を追加します。
ctx.beginPath()
ポイントに行きます
moveTo(float x, float y)
-カーソル位置を（x; y）に移動します。
スクリプトに次の行を追加します。
ctx.moveTo(200,200)
ポイントに線を引きます
lineTo(float x, float y)
-カーソル位置から（x; y）まで線を引きます。
たとえば、スクリプトに次の行を追加します。
ctx.lineTo(400,400)
サークル
最後のポイントは、キャンバスに線を表示するためのstrokeメソッドの呼び出しです。 そのため、スクリプトに次の行を追加します。
ctx.stroke()
ここで、例を開くと、キャンバスに線が描かれていることがわかります。
閉じる
何らかの形状を描画し、それを閉じる必要がある場合、closePathメソッドを使用できます。 例として、三角形を描画します。このため、ファイル内のコンテキストのみを取得し、そこに次の行を挿入します。
ctx.beginPath() ctx.moveTo(200,200) ctx.lineTo(400,400) ctx.lineTo(200,400) ctx.closePath() ctx.stroke()
ファイルを開くと、三角形が描かれます。 この場合、2行のみを描画し、closePathは3番目を描画して図を閉じました。
記入してください
輪郭の描画に加えて、シェイプを塗りつぶすこともできます。そのため、スクリプトのstroke関数の呼び出しをfill呼び出しに置き換えるだけです。 さらに、Figureを埋める場合、closePathを呼び出して明示的にFigureを閉じる必要はありません。fillを呼び出すと、Figureが自動的に閉じるためです。
アーク
arc(float x, float y, float r, float startAngle, float endAngle, bool anticlockwise)
-点（x; y）、半径-r、開始角度、および終了startAngle、endAngleを中心とする円弧を描画します。反時計回り= trueの場合、円の一部は反時計回り、それ以外の場合はその方向になります。
:
たとえば、部分的に塗りつぶされた円を描いてみましょう。このため、スクリプトをきれいにします。コンテキストのみを残します。 次に、次の行を追加します。
ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*0.85,false) ctx.stroke() ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*0.85,true) ctx.fill()
わずかに異なる円弧
arcTo(float x1, float y1, float x2, float y2. float r)
-2つのセグメントに囲まれた半径rの円弧を描く-ABとBC、ここで、ポイントAはカーソル位置、B =（x1; y1）C =（x2; y2）
たとえば、コンテキストのみを取得してスクリプトに残し、次の行を追加しましょう。
ctx.beginPath() ctx.moveTo(200,300) ctx.arcTo(300,100,400,300,50) ctx.stroke()
二次曲線
quadraticCurveTo(float x1, float y1, float x2, float y2)
-3点（カーソル位置、（x1; y1）、（x2; y2））で形成される2次曲線を描きます。
例として、次のコードを実行するものを見てみましょう。
ctx.beginPath() ctx.moveTo(100,100) ctx.quadraticCurveTo(200,200,50,200) ctx.stroke()
ベジェ曲線
bezierCurveTo(float x1, float y1, float x2, float y2, float x3, float y3)
-3次ベジェ曲線を描画します。 たとえば、スクリプトに次のコードを追加します。
ctx.beginPath() ctx.moveTo(100,100) ctx.bezierCurveTo(200,200,100,300,50,100) ctx.stroke()
再び長方形について
rect(float x, float y, float w, float w)
-fillRectおよびstrokeRectとまったく同じ動作をしますが、それらとは異なり、パスに長方形を追加するだけです。
パスの描画の基本を学習したので、パスを操作するときにさらに2つの重要な方法を学習する必要があります。
それが図のポイントですか？
isPointInPath(float x, float y)
-送信された座標を持つポイントが内側にある場合、trueを返します。 何らかの形状のクリックをチェックするためにこの方法を使用することは非常に良いことですが、例としてすべての値を手動で設定します。 スクリプトに次の行を追加します。
ctx.beginPath() ctx.rect(200,200,100,200) console.log(ctx.isPointInPath(250,250)) console.log(ctx.isPointInPath(100,100))
このスクリプトは、最初にtrue、次にfalseのデバッグコンソールに出力する必要があります。
描画領域を制限する
ストロークと塗りつぶし関数に加えて、パスを操作するためのクリップ関数もあります。何も描画しませんが、それでも重要な役割を果たします。それを呼び出した後、オブジェクトはパスが定義されている領域にある場合にのみ描画されます、小さな例を見てみましょう：
ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*2,true) ctx.stroke() // ctx.clip() // ctx.beginPath() ctx.moveTo(100,320) ctx.lineTo(500,320) ctx.lineTo(100,250) ctx.stroke() // ,
近い将来（理論的には2日間）
スタイル、グラデーション、影。
画像とテキストの描画
変換と構成
アニメーションと操作imageData