CanvasRenderingContext2Dオブジェクト
CanvasRenderingContext2Dオブジェクトがキャンバスに描画するグラフィックス機能のセットを提供します。彼らは、次のカテゴリに分けることができます。
四角形を描きます
あなたが使用されてもよいstrokeRect()し、fillRect()長方形の境界線と塗りつぶした矩形を描画します。あなたは使用することができるclearRect()定義された矩形領域をクリアします。
strokeRect（）メソッド
strokeRect()矩形（無着色）を描画する方法。デフォルトは黒です。
<script>
context.strokeRect(x,y,width,height);
</script>| パラメータ | 説明 |
|---|---|
| バツ | X矩形の左上隅の座標 |
| と | Y矩形の左上隅の座標 |
| 幅 | 矩形の幅（ピクセル単位） |
| 高さ | ピクセル矩形の高さ、 |
fillRect（）メソッド
fillRect()四角形（塗りつぶし）を描画する方法。デフォルトは黒です。
| パラメータ | 説明 |
|---|---|
| バツ | X矩形の左上隅の座標 |
| と | Y矩形の左上隅の座標 |
| 幅 | 矩形の幅（ピクセル単位） |
| 高さ | ピクセル矩形の高さ、 |
<script>
context.fillRect(x,y,width,height);
</script>clearRect（）メソッド
clearReact()所定の矩形内に所与の画素を空にする方法。
| パラメータ | 説明 |
|---|---|
| バツ | Xクリアする矩形の左上隅のX座標 |
| と | 明らかに矩形の左上隅のY座標 |
| 幅 | ピクセル単位で、矩形の幅クリアするには |
| 高さ | ピクセル単位で、四角形の高さをクリアするには |
<script>
context.clearRect(x,y,width,height);
</script>画像を描画
画像によるキャンバスAPI Image指定されたオブジェクトに対して、または使用してImage()コンストラクタによって作成された指定された外側スクリーン画像を表示します。キャンバスオブジェクトは、ソース画像として使用することができます。
drawImage()キャンバス上の画像をレンダリングする方法。また、スケールに元画像の任意の矩形領域を許可またはキャンバス上に描画することができます。
画像オブジェクト
Imageオブジェクトの埋め込み画像を表します。Imageたオブジェクトを。
オブジェクトのImageプロパティ
| プロパティ | 説明 |
|---|---|
| ALIGN | 設定または返すインラインコンテンツと整列。 |
| ALT | 設定または戻り代替テキストは、画像を表示することができません。 |
| 境界 | 設定または返します画像の周囲の境界線。 |
| コンプリート | ブラウザは、画像の読み込みが完了したかどうかを返します。 |
| 高さ | またはリターンは画像の高さを設定します。 |
| HSPACE | セット復帰白紙画像または左右。 |
| ID | 又は画像セットのIDを返します。 |
| ISMAP | 画像は、サーバー側のイメージマップであるかどうかを返します。 |
| LONGDESC | 設定またはURLの画像記述を含む文書に戻ります。 |
| LOWSRC | 設定または返しますが、画像のURLの低解像度バージョンを指します。 |
| 名前 | セットまたはイメージの名前を返します。 |
| SRC | 設定または返します画像のURL。 |
| USEMAP | USEMAPセットの戻り値、またはクライアント側のイメージマップの属性。 |
| VSPACE | 設定または返します画像の空白の上部と下部を。 |
| 幅 | または画像セットの幅を返します。 |
イベントImageオブジェクト
| イベント | 説明 |
|---|---|
| Onboart | ユーザーは、ローディング画像ハンドルを放棄することを呼び出すイベント。 |
| ONERROR | 誤差は、画像の読み込み中に発生すると、イベントハンドラが呼び出されます。 |
| onloadイベント | 画像は、読み込みイベントコールハンドルを終了したとき。 |
drawImage（）メソッド
drawImage()画像を描画する方法。
パラメータ
| パラメータ | 説明 |
|---|---|
| 画像 | 画像を描画します。 これは必須のある |
| X、Y | 描画する画像の左上隅。 |
| 幅高さ | 画像サイズを描画する必要があります。これらのパラメータは、画像をスケーリングすることができるように規定されています。 |
| sourceX、sourceY | 画像は、領域の左上隅に描画されます。整数ピクセルこれらの測定されたパラメータ。 |
| sourceWidth、sourceHeight | 描画すべき領域の画像サイズ、画像はピクセルで表されます。 |
| destX、destY | 画像領域を描画するキャンバスの左上隅の座標。 |
| destWidth、destHeight | 画像領域を描画キャンバスのサイズです。 |
文法
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)作成、レンダリングパス
これらの着色（黒）のコンテンツにフレームパターンまたはパターンを描きます。これは、統一された操作が呼び出されるまで追加電流パス。一つだけの電流路を維持するキャンバス。
閉じた形状を構成し、したがって、これらの接続点間描画操作を必要とします。キャンバスが成り立つ現在位置の接続点とを。操作を描画キャンバスの現在の場所、出発点として、それはラインのストロークを有するビューのキャンバスのように、最後まで更新されています。我々は（直線や曲線を描くのいずれか）、特定の操作を完了したら、現在の位置が最後のアクションの終わりであること、より多くのエンド操作となります。
我们可以在当前路径中画下多个不连续的图形。这时候我们就需要用上moveTo()方法。这个方法的目的是将当前位置移动到一个新位置（不会添加连接线）。当你的路径写完以后，你可以用stroke()方法绘制边框，也可以用fill()方法填充路径。
绘制路径
moveTo()方法
将当前位置移到目标点。
参数
| 参数 | 描述 |
|---|---|
| x | 路径的目标位置的 x 坐标 |
| y | 路径的目标位置的 y 坐标 |
context.moveTo(x,y);stroke()方法
stroke()方法会绘制出lineTo()方法定义的路线，即边框。
context.stroke();fill()方法
fill()方法填充当前的路径。默认黑色。
context.fill();可用的图形操作
绘制图形的操作有很多，例如绘制直线的lineTo，绘制矩形的rect()，绘制圆形的arc()或arcTo()，绘制曲线的bezierCurveTo()和quadraticCurveTo()。
lineTo()方法
lineTo()方法添加一个新点，创建从当前位置到最后指定点的线条（不会直接在画布上创建线条）。
| 参数 | 描述 |
|---|---|
| x | 路径的目标位置的 x 坐标 |
| y | 路径的目标位置的 y 坐标 |
context.lineTo(x,y);rect()方法
rect()方法创建矩形。此方法仅能创建一个矩形路径，边框或填充需要stroke()或fill()方法绘制。
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
context.rect(x,y,width,height);arc()方法
arc()方法创建弧/曲线。它用于创建圆、或部分圆。
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
context.arc(x,y,r,sAngle,eAngle,counterclockwise);actTo()方法
actTo方法在画布上创建介于两个切线之间的弧线。
| 参数 | 描述 |
|---|---|
| x1 | 弧的起点的 x 坐标 |
| y1 | 弧的起点的 y 坐标 |
| x2 | 弧的终点的 x 坐标 |
| y2 | 弧的终点的 y 坐标 |
| r | 弧的半径 |
context.fillRect(x1,y1,x2,y2,r);bezierCurveTo()方法
bezierCurveTo() 方法在一个画布中开始子路径的一个新的集合。 这个方法用来画曲线的。参数如下。
| 参数 | 描述 |
|---|---|
| cpX1，cpY1 | 和曲线的开始点（当前位置）相关联的控制点的坐标。 |
| cpX2，cpY2 | 和曲线的结束点相关联的控制点的坐标。 |
| x，y | 曲线的结束点的坐标。 |
bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)quadraticCurveTo()方法
quadraticCurveTo() 方法为当前路径添加一条贝塞尔曲线。
| 参数 | 描述 |
|---|---|
| cpX，cpY | 控制点的坐标 |
| x，y | 曲线终点的坐标 |
quadraticCurveTo(cpX, cpY, x, y)