From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/canvasrenderingcontext2d/index.html | 419 +++++++++++++++++++++ 1 file changed, 419 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d/index.html') diff --git a/files/ja/web/api/canvasrenderingcontext2d/index.html b/files/ja/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..9addd50e3a --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,419 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - Reference +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +

Canvas API の CanvasRenderingContext2D インターフェイスは、{{ HTMLElement("canvas")}} 要素に描画するための 2D レンダリングコンテキストを提供します。図形、文字、画像、その他のオブジェクトを描画するのに使用します。

+ +

詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。Canvas チュートリアル にもより多くの説明やサンプルコード、リソースがあります。

+ +

基本的な例

+ +

CanvasRenderingContext2D インスタンスを取得するには、まず連携する HTML <canvas> 要素が必要です。

+ +
<canvas id="my-house" width="300" height="300"></canvas>
+ +

この canvas の 2D レンダリングコンテキストを取得するには、引数に '2d' を指定して <canvas> の {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} を呼び出します。

+ +
const canvas = document.getElementById('my-house');
+const ctx = canvas.getContext('2d');
+
+ +

2D レンダリングコンテキストを取得した後は、好きなように描画できます。以下のコードは家を描画します。

+ +
// Set line width
+ctx.lineWidth = 10;
+
+// Wall
+ctx.strokeRect(75, 140, 150, 110);
+
+// Door
+ctx.fillRect(130, 190, 40, 60);
+
+// Roof
+ctx.moveTo(50, 140);
+ctx.lineTo(150, 60);
+ctx.lineTo(250, 140);
+ctx.closePath();
+ctx.stroke();
+
+ +

結果は次のようになります。

+ +

{{EmbedLiveSample("Basic_example", 700, 330)}}

+ +

リファレンス

+ +

矩形の描画

+ +

ビットマップに対して矩形を直接描画する方法は三つあります。

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
座標(x, y) を始点とする大きさ (width, height) の領域を、透明色 (透明な黒) で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
座標(x, y) を始点とし大きさ (width, height) の領域を、(訳注: 現在の塗りつぶしスタイルを用いて) 塗りつぶします。
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
座標(x, y) を始点とし大きさ (width, height) の領域の枠線を、現在のストロークスタイルを用いて描画します。
+
+ +

文字列の描画

+ +

以下のメソッドは、文字列の描画を提供します。文字列のプロパティについては {{domxref("TextMetrics")}} も参照してください。

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
現在の塗りつぶしスタイルを用いて、文字の内部を塗りつぶします。
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
現在のストロークスタイルを用いて、文字の輪郭を描画します。
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
{{domxref("TextMetrics")}} オブジェクトを返します。
+
+ +

線のスタイル

+ +

線がどのように描画されるかを設定・取得します。

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
線の幅を設定します。デフォルトは 1.0 です。
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
線の末端のスタイルを設定します。設定可能な値は butt (デフォルト), round, square です。
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
2 つの直線が出会う頂点のスタイルを設定します。設定可能な値は round, bevel, miter (デフォルト) です。
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Miter limit を設定します。デフォルトは 10 です。
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
現在の破線パターンを格納した配列を取得します。この配列には負でない実数が偶数個含まれています。
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
破線パターンを指定します。
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
線のどこから破線にするかを指定します。
+
+ +

文字列のスタイル

+ +

以下のプロパティは、テキストがどのように配置されるかを制御します。

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
フォントを設定します。デフォルト値は 10px sans-serif です。
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
テキストの揃え方を設定します。設定可能な値は以下の通りです: start (デフォルト), end, left, right or center。
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
ベースラインの揃え方を設定します。設定可能な値は以下の通りです: top, hanging, middle, alphabetic (デフォルト), ideographic, bottom。
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
テキストの方向を指定します。設定可能な値は以下の通りです: ltr, rtl, inherit (デフォルト)。
+
+ +

塗りつぶしとストロークのスタイル

+ +

塗りつぶしには図形の内部の色やスタイルの設定に、ストロークには図形の輪郭の色やスタイルの設定に使用されます。

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
図形の内側を色やスタイルで指定します。 デフォルト値は #000 (黒) です。
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
図形の輪郭を色やスタイルで指定します。 デフォルト値は #000 (黒) です。
+
+ +

グラデーションとパターン

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
パラメーターの座標から線に沿った線形のグラデーションを作成します。
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
パラメーターの座標から2つの円の座標を利用して放射状のグラデーションを作成します。
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
指定されたイメージソース ({{domxref("CanvasImageSource")}}) を利用してパターンイメージを作成します。そのパターンイメージからパラメーターの方向に繰り返します。このメソッドは {{domxref("CanvasPattern")}} で出力します。
+
+ +

影のスタイル

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
影のぼかしを設定します。デフォルト値は 0 です。
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
影の色を設定します。デフォルト値は完全に透明の黒です。
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
横方向の影の長さを設定します。デフォルト値は 0 です。
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
縦方向の影の長さを設定します。デフォルト値は 0 です。
+
+ +

パスの作成

+ +

以下のメソッドはオブジェクトのパスの操作で使用できます。

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
すでにあるサブパスのリストを消去して新しいパスの起点を作成します。パスを作成したい時にこのメソッドを利用します。
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
(x, y) 座標へ作成済みのサブパスの始点を移動します。
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
現在のパスに 3 次元のベジェ曲線を追加します。
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
現在のパスに 2 次元のベジェ曲線を追加します。
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
現在のパスに円弧を追加します。
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
パラメーターの制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
現在のパスに楕円形の円弧を追加します。
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
パラメーターの座標 (x, y) から width と height のサイズで長方形のパスを作成します。
+
+ +

パスを描画する

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
塗りつぶしのスタイルに基づいてサブパス内を塗りつぶします。
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
ストロークのスタイルに基づいてサブパスを描画します。
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
パラメーターで指定した要素がフォーカスされた場合、このメソッドは現在のパスの周りにフォーカスリングを描画します。
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
現在のパスかパラメーターで指定したパスが表示範囲に入るまでスクロールします。
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
現在のサブパスからクリッピングパスを作成します。このメソッドが実行されると、後に描画されたものがすべてそのクリッピングパスの内側にだけ描画されます。サンプルは Canvas チュートリアルの Clipping paths をご参照ください。
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
パラメーターで指定した位置が現在のパスの中に含まれているか調べます。
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
パラメーターで指定した位置がパスでストロークした領域の中に含まれているか調べます。
+
+ +

図形の変形

+ +

CanvasRenderingContext2D のレンダリングコンテキストのオブジェクトには現在の変換行列の状態とその変換行列を操作するメソッドがあります。現在のデフォルトパスを作成したり、テキスト、図形、{{domxref("Path2D")}} を描くと変換行列が適用されます。下記に紹介するメソッドは過去の事情や互換性を確保する理由で残されていて、{{domxref("SVGMatrix")}} オブジェクトがその API の大部分で使用されています。将来は {{domxref("SVGMatrix")}} の代わりに {{domxref("DOMMatrix")}} を利用したメソッドが使用されることになります。

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}
+
現在の変換行列 ({{domxref("SVGMatrix")}} オブジェクト)。
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
変換行列に回転を追加します。パラメーターの角度は時計回りをラジアン値で指定します。
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
キャンバスに対して X で横方向に、Y で縦方向にスケーリング変換を追加します。
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
キャンバスと指定した原点に対して X で横方向に、Y で縦方向にグリッド状で移動して、平行移動の変形を追加します。
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
現在の変換行列とパラメーターで指定した行列を乗算します。
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
現在の変換行列を単位行列にリセットしてから、パラメーターで指定した行列から transform() メソッドを実行します。
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
現在の変換行列を単位行列にリセットします。
+
+ +

合成

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
合成される前に適用されるキャンバス内の図形やイメージの透明度です。デフォルト値は 1.0 (不透明) です。
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
globalAlpha で設定した透明度を利用して、これまで描画された図形やイメージの描画方法を設定します。
+
+ +

画像の描画

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
指定したイメージを描画します。このメソッドでは指定方法が多く、大きな柔軟性を持ちます。
+
+ +

ピクセル操作

+ +

{{domxref("ImageData")}} も併せてご参照ください。

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
パラメーターで指定した領域から空の {{domxref("ImageData")}} オブジェクトを作成します。そのオブジェクトはすべてのピクセルが透明な黒で構成されています。
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
キャンバス内の座標 (sx, sy) から 幅 sw と 高さ sh のサイズで示される基本のピクセルデータの {{domxref("ImageData")}} オブジェクトを取得します。
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
パラメーターで指定した {{domxref("ImageData")}} オブジェクトのデータをビットマップ上に描画します。不適切な四角形が指定された場合は、その四角形のピクセルだけが描画されます。
+
+ +

画像の平滑化

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingQuality")}} {{experimental_inline}}
+
Allows you to set the quality of image smoothing.
+
+ +

キャンバスの状態

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

キャンバスの当たり判定

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

フィルター

+ +
+
{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
Applys a CSS and SVG filter to the Canvas, e.g. to change the brightness or blur the canvas.
+
+ +

非標準 API

+ + + +

Most of these APIs are deprecated and were removed shortly after Chrome 36.

+ +
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.CanvasRenderingContext2D")}}

+
+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf