From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../addhitregion/index.html | 171 +++++++++ .../api/canvasrenderingcontext2d/arc/index.html | 179 +++++++++ .../api/canvasrenderingcontext2d/arcto/index.html | 260 +++++++++++++ .../canvasrenderingcontext2d/beginpath/index.html | 90 +++++ .../api/canvasrenderingcontext2d/canvas/index.html | 56 +++ .../clearhitregions/index.html | 121 ++++++ .../canvasrenderingcontext2d/clearrect/index.html | 142 +++++++ .../canvasrenderingcontext2d/closepath/index.html | 120 ++++++ .../canvasrenderingcontext2d/direction/index.html | 177 +++++++++ .../drawfocusifneeded/index.html | 196 ++++++++++ .../canvasrenderingcontext2d/ellipse/index.html | 142 +++++++ .../canvasrenderingcontext2d/fillrect/index.html | 173 +++++++++ .../canvasrenderingcontext2d/fillstyle/index.html | 129 +++++++ .../canvasrenderingcontext2d/filltext/index.html | 173 +++++++++ .../api/canvasrenderingcontext2d/font/index.html | 179 +++++++++ .../globalcompositeoperation/index.html | 209 ++++++++++ .../imagesmoothingenabled/index.html | 186 +++++++++ .../ja/web/api/canvasrenderingcontext2d/index.html | 419 +++++++++++++++++++++ .../canvasrenderingcontext2d/linecap/index.html | 131 +++++++ .../api/canvasrenderingcontext2d/lineto/index.html | 166 ++++++++ .../measuretext/index.html | 76 ++++ .../api/canvasrenderingcontext2d/moveto/index.html | 89 +++++ .../api/canvasrenderingcontext2d/rect/index.html | 141 +++++++ .../removehitregion/index.html | 126 +++++++ .../api/canvasrenderingcontext2d/save/index.html | 91 +++++ .../api/canvasrenderingcontext2d/scale/index.html | 124 ++++++ .../setlinedash/index.html | 130 +++++++ .../api/canvasrenderingcontext2d/stroke/index.html | 175 +++++++++ .../canvasrenderingcontext2d/strokerect/index.html | 117 ++++++ .../strokestyle/index.html | 128 +++++++ .../canvasrenderingcontext2d/stroketext/index.html | 176 +++++++++ .../canvasrenderingcontext2d/textalign/index.html | 178 +++++++++ .../textbaseline/index.html | 150 ++++++++ 33 files changed, 5120 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/arcto/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/closepath/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/direction/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/ellipse/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/filltext/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/lineto/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/measuretext/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/moveto/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/stroke/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/ja/web/api/canvasrenderingcontext2d/textbaseline/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d') diff --git a/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html b/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html new file mode 100644 index 0000000000..9321189788 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/addhitregion/index.html @@ -0,0 +1,171 @@ +--- +title: CanvasRenderingContext2D.addHitRegion() +slug: Web/API/CanvasRenderingContext2D/addHitRegion +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/addHitRegion +--- +
{{APIRef}} {{obsolete_header}}
+ +

{{domxref("CanvasRenderingContext2D")}} の addHitRegion() メソッドは、ビットマップにヒット領域を追加します。

+ +

Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。

+ +

構文

+ +
void ctx.addHitRegion(options);
+
+ +

オプション

+ +

options 引数は任意です。設定する場合は、次のプロパティを含む {{jsxref("Object")}} を指定します。

+ +
+
path
+
ヒット領域をあらわす {{domxref("Path2D")}} オブジェクト。指定されない場合は現在のパスが使われます。
+
fillRule
+
ある点がヒット領域の中か外かを判断するアルゴリズムです。
+ 取りうる値は次の通りです。 + +
+
id
+
ヒット領域を後で参照するための ID。 ID はイベントなどで使われます。
+
parentID
+
親ヒット領域の ID。 cursor の継承やアクセシビリティツールによるナビゲーションで利用されます。
+
cursor
+
この領域にマウスが重なったときに使う {{cssxref("cursor")}} (初期値は inherit)。親ヒット領域があればそこから継承し、なければ、 canvas 要素の cursor から継承します。
+
control
+
イベントがルートされる要素 (canvasの子孫)。初期値は null。
+
label
+
control がない場合にヒット領域の説明として使われるテキストラベル (アクセシビリティツール向け)。初期値はnull。
+
role
+
control がない場合にヒット領域の挙動を説明する ARIA ロール (アクセシビリティツール向け)。初期値は null。
+
+ +

例

+ +

addHitRegion メソッドの使用

+ +

これは、 addHitRegion メソッドを使った簡単な例です。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+canvas.addEventListener('mousemove', function(event) {
+  if(event.region) {
+    alert("痛っ、僕の目だよ");
+  }
+});
+
+ctx.beginPath();
+ctx.arc(100, 100, 75, 0, 2 * Math.PI);
+ctx.lineWidth = 5;
+ctx.stroke();
+
+// 目
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI);
+ctx.arc(130, 80, 10, 0, 2 * Math.PI);
+ctx.fill();
+ctx.addHitRegion({id: "eyes"});
+
+// Mouth
+ctx.beginPath();
+ctx.arc(100, 110, 50, 0, Math.PI);
+ctx.stroke();
+
+ +

下のコードを編集すると変更が即座に canvas に反映されます。 (もし、スマイリーが不完全な状態で表示されている場合には、現在のブラウザーがヒット領域に対応しているかどうかをブラウザー互換性表を確認してください。設定で有効化する必要があるかもしれません。)

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 520) }}

+ +

仕様書

+ +

Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは https://github.com/whatwg/html/issues/3407 を参照してください。

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/arc/index.html b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..56f9db6d6b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

Canvas 2D APIのCanvasRenderingContext2D.arc()メソッドは、パスに円弧を加えます。円弧の中心座標は(x, y)で半径がr、角度startAngleからendAngleまで、anticlockwiseの向きに描かれます(デフォルトは時計回り)。

+ +

構文

+ +
void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
+
+ +

引数

+ +
+
x
+
円弧の中心のx座標値。
+
y
+
円弧の中心のy座標値。
+
radius
+
円弧の半径。
+
startAngle
+
円弧の始まりの角度。x軸の正方向から時計回りに定められるラジアン角。
+
endAngle
+
円弧の終わりの角度。x軸の正方向から時計回りに定められるラジアン角。
+
anticlockwise {{optional_inline}}
+
省略可能な{{jsxref("Boolean")}}。trueは、円弧を反時計回りに始まりから終わりの角度に向けて描きます。デフォルトは時計回り。
+
+ +

例

+ +

arc()メソッドの使い方

+ +

このコードは、単純な円の描き方を示しています。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

異なった形状の実例

+ +

以下の例は異なった形を描くことで、arc()()メソッドは何ができるのかを示します。

+ +
+
HTML
+ +
<canvas id="canvas" width="150" height="200"></canvas>
+
+ +
JavaScript
+
+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// 形状を描く
+// (訳注:横に 180, 270, 360 度の円を3つずつ、縦に時計回りか反時計回りにパスを引いたときの stroke() と fill() を示しています)
+for (var i = 0; i < 4; i++) {
+  for(var j = 0; j < 3; j++) {
+		ctx.beginPath();
+		var x          = 25 + j * 50;                  // x座標
+		var y          = 25 + i * 50;                  // y座標
+		var radius     = 20;                           // 円弧の半径
+		var startAngle = 0;                            // 円弧の開始角
+		var endAngle   = Math.PI + (Math.PI * j) /2;   // 円弧の終了角
+		var anticlockwise  = i % 2 == 1;               // 時計回りか反時計回りか
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i > 1) {
+			ctx.fill();
+		} else {
+			ctx.stroke();
+		}
+	}
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザの互換性

+ + + +

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

+ +

Geckoについての注釈

+ +

Gecko 2.0{{geckoRelease("2.0")}}より:

+ + + +

参考情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/arcto/index.html b/files/ja/web/api/canvasrenderingcontext2d/arcto/index.html new file mode 100644 index 0000000000..a672a83843 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/arcto/index.html @@ -0,0 +1,260 @@ +--- +title: CanvasRenderingContext2D.arcTo() +slug: Web/API/CanvasRenderingContext2D/arcTo +translation_of: Web/API/CanvasRenderingContext2D/arcTo +--- +
{{APIRef}}
+ +

Canvas 2D APIの CanvasRenderingContext2D.arcTo() メソッドは、2つの制御点と半径を指定して現在のサブパスに円弧を追加します。円弧は現在のパスの最後の点と自動的に直線で連結されます。

+ +

このメソッドは主に角丸の図形を描画するのに使用されます。

+ +
+

Note: 相対的に大きな半径を指定した場合、得られる角丸の描線が期待するものとは異なる可能性があります: 円弧と連結する直線は円弧の半径に合うように描線されます。

+
+ +

Syntax

+ +
void ctx.arcTo(x1, y1, x2, y2, radius);
+
+ +

Parameters

+ +
+
x1
+
1つ目の制御点のx座標。
+
y1
+
1つ目の制御点のy座標。
+
x2
+
2つ目の制御点のx座標。
+
y2
+
2つ目の制御点のy座標。
+
radius
+
円弧の半径。負でない値を設定する必要があります。
+
+ +

Examples

+ +

 arcTo の仕組み

+ +

arcTo() の仕組みを解釈するには、始点と1つ目の制御点を結ぶ直線と、そこから2つ目の制御点を結ぶ直線の2つの線をイメージする方法があります。arcTo()を使用しない場合、これら2つの線分は鋭角を形成しますが、arcTo() はこの鋭角部分に接する円弧を描くことで滑らかに接続します。すなわち、2直線に接する円弧を作成するということになります。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Tangential lines
+ctx.beginPath();
+ctx.strokeStyle = 'gray';
+ctx.moveTo(200, 20);
+ctx.lineTo(200, 130);
+ctx.lineTo(50, 20);
+ctx.stroke();
+
+// Arc
+ctx.beginPath();
+ctx.strokeStyle = 'black';
+ctx.lineWidth = 5;
+ctx.moveTo(200, 20);
+ctx.arcTo(200,130, 50,20, 40);
+ctx.stroke();
+
+// Start point
+ctx.beginPath();
+ctx.fillStyle = 'blue';
+ctx.arc(200, 20, 5, 0, 2 * Math.PI);
+ctx.fill();
+
+// Control points
+ctx.beginPath();
+ctx.fillStyle = 'red';
+ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Control point one
+ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Control point two
+ctx.fill();
+
+ +

Result

+ +

この例では、arcTo() によって描かれる線を黒い太線、接線を灰色、制御点を赤、始点となる現在のパスの最後の点を青で描画しています。

+ +

{{ EmbedLiveSample('How_arcTo_works', 315, 165) }}

+ +

角丸図形の作成

+ +

この例では arcTo()を用いて丸い角をもつ線を描画しています。これが最も一般的な使われ方です。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

描線は直前のmoveTo()により座標 (230, 20)から開始し、2つの制御点(90, 130) と (20, 20) を結ぶ直線に接するように形成された半径50の円弧に接続されます。円弧の終端からは lineTo() メソッドにより (20, 20) の点まで直線が描画されます。2つ目の制御点の座標と同じ座標を lineTo() で指定することで、滑らかな描線を得ることができます。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const p0 = { x: 230, y: 20  }
+const p1 = { x: 90,  y: 130 }
+const p2 = { x: 20,  y: 20  }
+
+const labelPoint = function (p) {
+  const offset = 15;
+  ctx.fillText('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset);
+}
+
+ctx.beginPath();
+ctx.moveTo(p0.x, p0.y);
+ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
+ctx.lineTo(p2.x, p2.y);
+
+labelPoint(p0);
+labelPoint(p1);
+labelPoint(p2);
+
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Creating_a_rounded_corner', 315, 165) }}

+ +

大きすぎる半径を指定した場合

+ +

相対的に大きな半径を指定した場合には、前述の方法では期待されるような滑らかな描線は得られません。この例では、moveTo()後の地点から円弧に接続される線は下方ではなく上方に向かってしまっています。これは、2つの直線に接する円の半径が大き過ぎるために、始点よりも上方に円弧との接点があるために発生しています。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(180, 90);
+ctx.arcTo(180,130, 110,130, 130);
+ctx.lineTo(110, 130);
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Result_of_a_large_radius', 315, 165) }}

+ +

Live demo

+ +

以下はより洗練されたデモです。半径の変化幅を調節し、どのように描線が変化するかを試すことができます。

+ +

HTML

+ +
<div>
+  <label for="radius">Radius: </label>
+  <input name="radius"  type="range" id="radius" min=0 max=100 value=50>
+  <label for="radius"  id="radius-output">50</label>
+</div>
+<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx    = canvas.getContext('2d');
+
+const controlOut = document.getElementById('radius-output');
+const control    = document.getElementById('radius');
+      control.oninput = () => {
+          controlOut.textContent = r = control.value;
+      };
+
+const mouse = { x: 0, y: 0 };
+
+let   r  = 100; // Radius
+const p0 = { x: 0, y: 50 };
+
+const p1 = { x: 100, y: 100 };
+const p2 = { x: 150, y: 50 };
+const p3 = { x: 200, y: 100 };
+
+const labelPoint = function (p, offset, i = 0){
+    const {x, y} = offset;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
+}
+
+const drawPoints = function (points){
+  for (let i = 0; i < points.length; i++) {
+    var p = points[i];
+    labelPoint(p, { x: 0, y: -20 } , i)
+  }
+}
+
+// Draw arc
+const drawArc = function ([p0, p1, p2], r) {
+  ctx.beginPath();
+  ctx.moveTo(p0.x, p0.y);
+  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.stroke();
+}
+
+
+let t0 = 0;
+let rr = 0; // the radius that changes over time
+let a  = 0; // angle
+let PI2 = Math.PI * 2;
+const loop = function (t) {
+  t0 = t / 1000;
+  a  = t0 % PI2;
+  rr = Math.abs(Math.cos(a) * r);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  drawArc([p1, p2, p3], rr);
+  drawPoints([p1, p2, p3]);
+  requestAnimationFrame(loop);
+}
+
+loop(0);
+ +

Result

+ +
{{EmbedLiveSample('Live_demo', 315, 200) }}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..b80da36304 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,90 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

Canvas 2D API のCanvasRenderingContext2D.beginPath() メソッドは、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合、このメソッドを呼び出してください。

+ +
+

注: 新しいサブパス (つまり、現在のキャンバスの状態に一致するサブパス) を作成する場合、{{domxref("CanvasRenderingContext2D.moveTo()")}}を使用できます。

+
+ +

構文

+ +
void ctx.beginPath();
+
+ +

例

+ +

異なるパスの作成

+ +

この例では、それぞれが1本の直線を含む2つのパスを作成します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

beginPath() メソッドはそれぞれの線についての処理開始前に呼ばれるため、各線は別々の色で描かれるでしょう。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// 第1のパス
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// 第2のパス
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Creating_distinct_paths', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/canvas/index.html b/files/ja/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..bba21324b0 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,56 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

Canvas API の一部であるCanvasRenderingContext2D.canvas プロパティは、context に関連づけられた {{domxref("HTMLCanvasElement")}}  オブジェクトへの読み込み専用の参照です。 {{HTMLElement("canvas")}} に関連づけられていない場合は {{jsxref("null")}} になることがあります。

+ +

構文

+ +
ctx.canvas;
+ +

例

+ +

以下の例は HTML ドキュメントに次の {{HTMLElement("canvas")}} 要素があるものとしています:

+ +
<canvas id="canvas"></canvas>
+
+ +

CanvasRenderingContext2D の中にある canvas 要素への参照を canvas プロパティから取得できます:

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.canvas // HTMLCanvasElement
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザ互換性

+ + + +

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

+ +

参考情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.html b/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.html new file mode 100644 index 0000000000..221e2fcfd6 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.html @@ -0,0 +1,121 @@ +--- +title: CanvasRenderingContext2D.clearHitRegions() +slug: Web/API/CanvasRenderingContext2D/clearHitRegions +translation_of: Web/API/CanvasRenderingContext2D/clearHitRegions +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

Canvas 2D APIのCanvasRenderingContext2D.clearHitRegions()メソッドはcanvasからすべてのヒット領域を削除します。

+ +

構文

+ +
void ctx.clearHitRegions();
+
+ +

例

+ +

clearHitRegionsメソッドを使う

+ +

これは、clearHitRegionsメソッドを使った簡単なコードです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+// ヒット領域をいくつか指定
+ctx.addHitRegion({id: "eyes"});
+ctx.addHitRegion({id: "nose"});
+ctx.addHitRegion({id: "mouth"});
+
+// canvasからすべて削除
+ctx.clearHitRegions();
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearhitregions", "CanvasRenderingContext2D.clearHitRegions")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(38)}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(38)}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

注記

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..4f09a2bc91 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,142 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.clearRect() は、座標 (x, y) を始点とする大きさ (width, height) の領域を、透明色（透明な黒）で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。

+ +

文法

+ +
void ctx.clearRect(x, y, width, height);
+
+ +

引数

+ +
+
x
+
矩形領域の始点のX座標を指定します。
+
y
+
矩形領域の始点のY座標を指定します。
+
width
+
矩形領域の幅を指定します。
+
height
+
矩形領域の高さを指定します。
+
+ +

Usage notes

+ +

clearRect にちなんでよく起きる問題は 不適切なパスによって起きています。clearRect を呼んで新しいフレームを描画し始める前に {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} を呼ぶのを忘れないようにして下さい。

+ +

訳注:
+ clearRect() 自体の動作にパスの設定は関係ありません。「clearRect()の後はbeginPath()を呼ばなければならない」というルールはありません。この注釈は「キャンバスをクリアした後って大体新しいフレームを描画しようとするよね。そのときに beginPath() し忘れておかしなことになっているのを clearRect() のせいにしないようにね」ということを言いたいのだと思います。

+ +

使用例

+ +

clearRect の使い方

+ +

clearRect メソッドを使用する単純な例です。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // パスが閉じるので、三角形の最後の辺も描画される。
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// キャンバス全体を消去するには、以下のようにします。
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ +

以下のコードを編集して、変更がどのように適用されるか試してみてください。

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:140px;">
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{EmbedLiveSample('Playable_code', 700, 400)}}

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ間の互換性

+ + + +

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

+ +

関連項目

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ja/web/api/canvasrenderingcontext2d/closepath/index.html new file mode 100644 index 0000000000..dcb5a0b776 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/closepath/index.html @@ -0,0 +1,120 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference + - メソッド + - リファレンス +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.closePath() は Canvas 2D API のメソッドで、現在の点から現在のサブパスの開始点までの間に直線を追加することを試みます。図形がすでに閉じていたり、1つしか点がなかったりした場合は、この関数は何もしません。

+ +

このメソッドは canvas に直接は何も描きません。 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} または {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} メソッドを使用してパスを描くことができます。

+ +

構文

+ +
void ctx.closePath();
+
+ +

例

+ +

三角形を閉じる

+ +

この例は最初に三角形の2つの (対角の) 辺を lineTo() メソッドを使用して作成します。その後で、図形の最初と最後の点を自動的に接続する closePath() メソッドで、底辺を作成します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

The triangle's corners are at (20, 150), (120, 20), and (220, 150).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 140);   // ペンを左下の隅へ移動
+ctx.lineTo(120, 10);   // 上中央へ線を引く
+ctx.lineTo(220, 140);  // 右下の隅へ線を引く
+ctx.closePath();       // 左下の隅へ線を引く
+ctx.stroke();
+
+ +

結果

+ +

{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}

+ +

サブパスを1つだけ閉じる

+ +

この例では、非接続のサブパス3つからなるスマイリーの顔マークを描画します。

+ +
+

メモ: すべての弧について、作成された後で closePath() が呼び出されていますが、最後の弧 (サブパス) のみが閉じられます。

+
+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

最初の2つの弧は顔の目を作成します。最後の弧は口を作成します。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(240, 20, 40, 0, Math.PI);
+ctx.moveTo(100, 20);
+ctx.arc(60, 20, 40, 0, Math.PI);
+ctx.moveTo(215, 80);
+ctx.arc(150, 80, 65, 0, Math.PI);
+ctx.closePath();
+ctx.lineWidth = 6;
+ctx.stroke();
+
+ +

結果

+ +

{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/direction/index.html b/files/ja/web/api/canvasrenderingcontext2d/direction/index.html new file mode 100644 index 0000000000..4e0e4d2885 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/direction/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.direction +slug: Web/API/CanvasRenderingContext2D/direction +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/direction +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

Canvas 2D API の CanvasRenderingContext2D.direction プロパティは、テキストを描画するときに使用する現在の書字方向を指定します。

+ +

構文

+ +
ctx.direction = "ltr" || "rtl" || "inherit";
+
+ +

オプション

+ +

指定可能な値:

+ +
+
ltr
+
テキストの書字方向を left-to-right にします。
+
rtl
+
テキストの書字方向を right-to-left にします。
+
inherit
+
テキストの書字方向は {{HTMLElement("canvas")}} 要素または {{domxref("Document")}} から適宜継承します。
+
+ +

デフォルト値は inherit です。

+ +

例

+ +

direction プロパティの使用例

+ +

さまざまな書字方向を設定するために direction プロパティを使用する、シンプルなコードスニペットです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.direction = "ltr";
+ctx.strokeText("Hello world", 0, 100);
+
+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ + + +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] この機能はデフォルトで無効化されています。有効化するには ExperimentalCanvasFeatures 機能フラグを使用します。

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html b/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html new file mode 100644 index 0000000000..4d0135e6fa --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html @@ -0,0 +1,196 @@ +--- +title: CanvasRenderingContext2D.drawFocusIfNeeded() +slug: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded +translation_of: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded +--- +
{{APIRef}}
+ +

Canvas 2D APIのCanvasRenderingContext2D.drawFocusIfNeeded()メソッドは、パラメーターで与えられた要素がフォーカスした時に、現在のパスもしくは与えられたパスの周りにフォーカスリングを描画します。

+ +

構文

+ +
void ctx.drawFocusIfNeeded(element);
+void ctx.drawFocusIfNeeded(path, element);
+
+ +

パラメーター

+ +
+
element
+
フォーカスしたかどうかをチェックする要素。
+
path
+
利用する {{domxref("Path2D")}} パス。
+
+ +

例

+ +

drawFocusIfNeededメソッドを使う

+ +

これは、drawFocusIfNeededメソッドを使った簡単なコードです

+ +

HTML

+ +
<canvas id="canvas">
+  <input id="button" type="range" min="1" max="12">
+</canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var button = document.getElementById("button");
+
+button.focus();
+
+ctx.beginPath();
+ctx.rect(10, 10, 30, 30);
+ctx.drawFocusIfNeeded(button);
+
+ +

下のコードを編集すると、変更がリアルタイムにcanvasに反映されます:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas">
+<input id="button" type="range" min="1" max="12">
+</canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+button.focus();
+ctx.beginPath();
+ctx.rect(10, 10, 30, 30);
+ctx.drawFocusIfNeeded(button);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var button = document.getElementById("button");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawfocusifneeded", "CanvasRenderingContext2D.drawFocusIfNeeded")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatGeckoDesktop(29)}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Pathパラメーター{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(29)}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Pathパラメーター{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

注記

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ja/web/api/canvasrenderingcontext2d/ellipse/index.html new file mode 100644 index 0000000000..67e335c1c6 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -0,0 +1,142 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference + - メソッド +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.ellipse() は Canvas 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。

+ +

構文

+ +
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
+
+ +

ellipse() メソッドは (x, y) を中心として、 radiusX と radiusY を半径とする楕円の弧を生成します。パスは startAngle から始まって endAngle で終わり、回転方向は anticlockwise で指定します (既定では時計回りです)。

+ +

引数

+ +
+
x
+
楕円の中心の X 軸 (水平) 座標です。
+
y
+
楕円の中心の Y 軸 (垂直) 座標です。
+
radiusX
+
楕円の長辺の半径です。負の値であってはなりません。
+
radiusY
+
楕円の短辺の半径です。負の値であってはなりません。
+
rotation
+
楕円の傾きで、ラジアンで表現します。
+
startAngle
+
楕円が始まる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。
+
endAngle
+
楕円が終わる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。
+
anticlockwise {{optional_inline}}
+
省略可能な {{jsxref("Boolean")}} の値で、 true の場合は楕円を反時計回りに描きます。既定値は false (時計回り) です。
+
+ +

例

+ +

完全な楕円の描画

+ +

この例は、 π/4 ラジアンの角度 (45°) で楕円を描きます。楕円全体を描くには、弧が 0 ラジアン (0°) で始まり、 2π ラジアン (360°) で終わるようにします。

+ +

HTML

+ +
<canvas id="canvas" width="200" height="200"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// 楕円を描画
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
+ctx.stroke();
+
+// Draw the ellipse's line of reflection
+ctx.beginPath();
+ctx.setLineDash([5, 5]);
+ctx.moveTo(0, 200);
+ctx.lineTo(200, 0);
+ctx.stroke();
+
+ +

結果

+ +

{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}

+ +

様々な楕円の弧

+ +

この例では、様々な属性の3本の楕円のパスを生成します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
+ctx.fill();
+
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
+ctx.fill();
+
+ctx.fillStyle = 'green';
+ctx.beginPath();
+ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
+ctx.fill();
+
+ +

結果

+ +

{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..1424ba870b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fillRect() は座標 (x, y) を始点に、大きさ(width, height) の領域を塗りつぶします。塗りつぶす様式は fillStyle 属性に従います。

+ +

文法

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Parameters

+ +
+
x
+
矩形領域の始点のうち、X座標を指定します。
+
y
+
矩形領域の始点のうち、Y座標を指定します。
+
width
+
矩形領域の横幅を指定します。
+
height
+
矩形領域の高さを指定します。
+
+ +

使用例

+ +

fillRect の使い方

+ +

fillRect メソッドを利用した簡単な使用例です。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// キャンバス全体を塗りつぶすには、以下のようにします。
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

以下のコードを編集して、変更がどのように適用されるか試してみてください。

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ間の互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

関連項目

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..e12cd42f3b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

Canvas 2D API のCanvasRenderingContext2D.fillStyle プロパティは、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。デフォルト値は #000 (黒色)です。

+ +
+

輪郭と塗りつぶしのスタイル例については、 canvas チュートリアルの スタイルと色を適用する をご覧ください。

+
+ +

構文

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

オプション

+ +
+
color
+
CSS の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。
+
gradient
+
{{domxref("CanvasGradient")}} オブジェクト (線形または放射状のグラデーション) 。
+
pattern
+
{{domxref("CanvasPattern")}} オブジェクト (繰り返し画像) 。
+
+ +

例

+ + + +

図形の塗色を変更する

+ +

このサンプルでは青色の塗色を矩形に適用します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_fill_color_of_a_shape', 700, 160) }}

+ +

ループを使用した複数の塗色の作成

+ +

この例では2つの for ループでそれぞれが異なる塗色を持つ四角形のグリッドを描画します。 このためには、2つの変数 i と j を四角形ごとに固有となるRGB色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+for (let i = 0; i < 6; i++) {
+  for (let j = 0; j < 6; j++) {
+    ctx.fillStyle = `rgb(
+        ${Math.floor(255 - 42.5 * i)},
+        ${Math.floor(255 - 42.5 * j)},
+        0)`;
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}
+
+ +

結果はこのようになります:

+ +

{{EmbedLiveSample("Creating_multiple_fill_colors_using_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

WebKit/Blink特有のメモ

+ +

WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド ctx.setFillColor() が実装されています。

+ +
setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html new file mode 100644 index 0000000000..87823bbb20 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.fillText() メソッドは、指定した位置 (x, y) にテキストを塗りつぶして描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。

+ +

テキストの輪郭線を描画するための {{domxref("CanvasRenderingContext2D.strokeText()")}} メソッドもご覧ください。

+ +

構文

+ +
void ctx.fillText(text, x, y [, maxWidth]);
+
+ +

引数

+ +
+
text
+
現在の {{domxref("CanvasRenderingContext2D.font","font")}}、{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction","direction")}} の値を使用して描画するテキスト。
+
x
+
テキストの描画を始める、x 軸の座標。
+
y
+
テキストの描画を始める、y 軸の座標。
+
maxWidth {{optional_inline}}
+
描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。
+
+ +

例

+ +

fillText メソッドの使用例

+ +

fillText メソッドを使用する、シンプルなコードスニペットです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
+
+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="編集" />
+  <input id="reset" type="button" value="リセット" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE(9)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/font/index.html b/files/ja/web/api/canvasrenderingcontext2d/font/index.html new file mode 100644 index 0000000000..0b49ae78fa --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/font/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/font +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.font プロパティは、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS font {{ 原語併記("記述子", "specifier") }} と同じ構文を用います。デフォルトフォントは 10px の{{ 原語併記("サンセリフ", "sans-serif") }} です。

+ +

構文

+ +
ctx.font = value;
+
+ +

オプション

+ +
+
value
+
CSS {{cssxref("font")}} の値としてパースされる {{domxref("DOMString")}}。デフォルトのフォントは 10px sans-serif です。
+
+ +

例

+ +

font プロパティの使用例

+ +

さまざまなフォントサイズやフォントファミリーを設定するために font プロパティを使用する、シンプルなコードスニペットです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ + + +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

CSS Font Loading API でフォントを読み込む

+ +

{{domxref("FontFace")}} API の助力により、canvas で使用する前にフォントを明示的に読み込むことができます。

+ +
var f = new FontFace("test", "url(x)");
+  f.load().then(function() {
+    // canvas コンテキストでフォントを使用する準備ができた
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE(9)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Gecko 固有の注意事項

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html new file mode 100644 index 0000000000..c176a9becd --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -0,0 +1,209 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +tags: + - API + - Blending + - Canvas + - CanvasRenderingContext2D + - Compositing + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.globalCompositeOperationプロパティは、新たな図形を描くときに適用する合成処理の種類を定めます。種類は文字列で、合成やブレンドモードのいずれが用いられるのかを決めます。

+ +

なお、Canvas TutorialのCompositing and clippingの章をご参照ください。

+ +

構文

+ +
ctx.globalCompositeOperation = 種類;
+ +

種類

+

{{EmbedLiveSample("Compositing_example", 750, 7300, "" +,"../../ja/docs/Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

例

+ +

globalCompositeOperationプロパティの使い方

+ +

つぎに抜き書きした簡単なコードは、描かれたふたつの矩形の重なりをglobalCompositeOperationプロパティによって除いています。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.globalCompositeOperation = "xor";
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = "red";
+ctx.fillRect(50, 50, 100, 100);
+
+ +

以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('Compositing')}}{{Spec2('Compositing')}} 
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Blend modes{{CompatUnknown}}{{ CompatGeckoDesktop("20") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Blend modes{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("20") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

WebKit/Blinkについての注釈

+ + + +

Geckoについての注釈

+ + + +

参考情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html new file mode 100644 index 0000000000..8577d3ab83 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -0,0 +1,186 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

Canvas 2D API の CanvasRenderingContext2D.imageSmoothingEnabled プロパティ は、画像が滑らか（true：既定値）か、またはそうではない（false）かによって、変化するように設定できます。imageSmoothingEnabled プロパティを取得すると、設定された最新の値が返されます。

+ +

このプロパティは、たとえばキャンバスをスケーリングするような、ピクセルアートをテーマにしたゲームに役立ちます。 既定のリサイズアルゴリズムは、ぼやかし効果をかけることで、美しいピクセルを崩してしまいます。このような場合、このプロパティを false に設定します。{{cssxref("image-rendering")}} プロパティも確認してください。

+ +

構文

+ +
ctx.imageSmoothingEnabled = value;
+ +

オプション

+ +
+
value
+
滑らかな画像かどうかを示す {{jsxref("Boolean")}} 値。
+
+ +

例

+ +

imageSmoothingEnabled プロパティを使用する

+ +

これは、スケーリングされた画像で imageSmoothingEnabled property プロパティを使用するコードスニペットです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+};
+
+ +

以下のコードを編集して、canvas で変更がライブアップデートされることを確認してみてください：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート30 [1]{{ CompatVersionUnknown() }}
+ {{property_prefix("moz")}}		{{ CompatVersionUnknown() }}
+ {{property_prefix("ms")}}		{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+ {{property_prefix("moz")}}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] バージョン 29 までは、webkit プレフィックス付きでサポートされています。

+ +

関連項目

+ + 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")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..002363d26b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,131 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +
Canvas 2D APIのCanvasRenderingContext2D.lineCap プロパティは、描線の端点の形状を設定します。
+ +
+

Note: 描線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、 {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} のメソッドで行われます。

+
+ +

Syntax

+ +
ctx.lineCap = "butt" || "round" || "square";
+
+ +

Options

+ +
+
"butt"
+
端点は四角く切られます。デフォルト値です。
+
"round"
+
端点は丸くなります。
+
"square"
+
端点に線幅と同じ幅で高さが半分の四角形が描き加えられます。
+
+ +

Examples

+ +

線の先端の形を変える

+ +

この例では直線の端点を丸めています。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}

+ +

先端形状の比較

+ +

次の例では、lineCap プロパティがそれぞれ異なる3本の線を描画しています。その違いを観察するために、2本の補助線を引いています。3本の線はそれぞれこの補助線直上を始点および終点として描かれています。

+ +

左の線はデフォルトのオプション "butt" の場合の描線で、補助線のところで丁度切れています。2つ目の"round" オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の"square" オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+
+ +

{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

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

+ + + + + +

See also

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html new file mode 100644 index 0000000000..6929a63253 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.lineTo() メソッドは、直線でサブパスの終点を x と y の座標へ接続します（この線は実際には描画されません）。

+ +

構文

+ +
void ctx.lineTo(x, y);
+
+ +

引数

+ +
+
x
+
線の終点の x 座標。
+
y
+
線の終点の y 座標。
+
+ +

例

+ +

lineTo メソッドを使う

+ +

これは lineTo メソッドを使った実にシンプルなコード断片です。{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} を使って直線を描くパスを開始し 、ペンを {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}} で動かし、そして {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} メソッドを使って実際に線を描画します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

下のコードを編集して、変更が canvas に直に反映されることを確認してください。

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参考情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/ja/web/api/canvasrenderingcontext2d/measuretext/index.html new file mode 100644 index 0000000000..0eb851be48 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -0,0 +1,76 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.measureText() メソッドは、測定したテキストの情報 (例えば幅など) を持つ {{domxref("TextMetrics")}} オブジェクトを返します。

+ +

構文

+ +
TextMetrics ctx.measureText(text);
+ +

引数

+ +
+
text
+
測定する文字列。
+
+ +

戻り値

+ +

{{domxref("TextMetrics")}} オブジェクト。

+ +

例

+ +

以下の {{HTMLElement("canvas")}} 要素があるとします:

+ +
<canvas id="canvas"></canvas>
+
+ +

以下のコードを使用して {{domxref("TextMetrics")}} オブジェクトを得ることができます:

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var text = ctx.measureText("foo"); // TextMetrics オブジェクト
+text.width; // 16;
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ja/web/api/canvasrenderingcontext2d/moveto/index.html new file mode 100644 index 0000000000..4c3537dad5 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/moveto/index.html @@ -0,0 +1,89 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.moveTo() メソッドは、新しいサブパスの始点を (x, y) 座標に移動します。

+ +

構文

+ +
void ctx.moveTo(x, y);
+
+ +

引数

+ +
+
x
+
点の x (水平) 座標。
+
y
+
点の y (鉛直) 座標。
+
+ +

例

+ +

複数のサブパスを作成する

+ +

この例は、moveTo() を使用して、1 つのパス内に 2 つのサブパスを作成します。サブパスは両方とも stroke() を 1 回呼び出すことで、レンダリングできます。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

最初の線は、(50, 50) が始点で (200, 50) が終点です。二番目の線は、(50, 90) が始点で (280, 120) が終点です。

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);   // 1 つ目のサブパス
+ctx.lineTo(200, 50);
+ctx.moveTo(50, 90);   // 2 つ目のサブパス
+ctx.lineTo(280, 120);
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Creating_multiple_sub-paths', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

参考情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/rect/index.html b/files/ja/web/api/canvasrenderingcontext2d/rect/index.html new file mode 100644 index 0000000000..651320c13c --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/rect/index.html @@ -0,0 +1,141 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +
{{APIRef}}
+ +

Canvas 2D APIのCanvasRenderingContext2D.rect() メソッドは、2Dウィンドウのサイズ(width, height)や開始位置(x, y)を定義できるメソッドです。

+ +

ウィンドウのサイズと開始位置をもとに直線で引かれたウィンドウが2Dウィンドウになり、fillメソッドでウィンドウ内の塗りつぶしをしたり、strokeメソッドでウィンドウの外周を直線で囲み、可視化することなどできます。

+ +

構文

+ +
void ctx.rect(x, y, width, height);
+
+ +

パラメーター

+ +
+
x
+
+

2Dウィンドウの開始位置(x軸)

+
+
y
+
+

2Dウィンドウの開始位置(y軸)

+
+
width
+
+

2Dウィンドウの幅

+
+
height
+
+

2Dウィンドウの高さ

+
+
+ +

例

+ +

 rect メソッドの使用方法

+ +

この例は、 rect メソッドを使用してウィンドウの作成をするシンプルなコードです。
+ 内容は、canvas内に作成したウィンドウに対して、{{domxref("CanvasRenderingContext2D.fill", "fill()")}} を実行し、ウィンドウ内を黒塗りにしているだけになります。
+ 上に記載してあるウィンドウを黒塗りする {{domxref("CanvasRenderingContext2D.fill", "fill()")}} 以外にも、

+ + + +

などが存在しているので、参考にしてみてください。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

下のコードを変更してみよう:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.fill();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書ステータス備考
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.html b/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.html new file mode 100644 index 0000000000..cc0550f292 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.html @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.removeHitRegion() +slug: Web/API/CanvasRenderingContext2D/removeHitRegion +translation_of: Web/API/CanvasRenderingContext2D/removeHitRegion +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

Canvas 2D APIのCanvasRenderingContext2D.removeHitRegion() メソッドは、canvasから与えられたヒット領域を削除します。

+ +

構文

+ +
void ctx.removeHitRegion(id);
+
+ +

パラメータ

+ +
+
id
+
削除する領域のidをあらわす{{domxref("DOMString")}}。
+
+ +

例

+ +

removeHitRegionメソッドを使う

+ +

これは、removeHitRegionを使った簡単なコードです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+// ヒット領域を指定
+ctx.addHitRegion({id: "eyes"});
+
+// canvasからヒット領域を削除
+ctx.removeHitRegion("eyes");
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-removehitregion", "CanvasRenderingContext2D.removeHitRegion")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(30)}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(30)}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

注記

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/save/index.html b/files/ja/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..e12c603823 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,91 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.save() メソッドは、現在の状態をプッシュしてキャンバスの全体の状態をスタックに保存します。

+ +

描画状態

+ +

スタックに保存される描画状態には以下のものが含まれます:

+ + + +

構文

+ +
void ctx.save();
+ +

例

+ +

描画状態を保存する

+ +

この例は、save() メソッドを使用してデフォルトの状態を保存して、restore() を使用して復元しているため、デフォルトの状態で長方形を描画できます。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Save the default state
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restore the default state
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

結果

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/scale/index.html b/files/ja/web/api/canvasrenderingcontext2d/scale/index.html new file mode 100644 index 0000000000..9bd57b8ca2 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/scale/index.html @@ -0,0 +1,124 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +
{{APIRef}}
+ +

Canvas 2D APIのCanvasRenderingContext2D.scale()メソッドは、キャンバス上の長さを縦方向及び横方向に拡縮する変形を適用させます。

+ +

By default, one unit on the canvas is exactly one pixel. A scaling transformation modifies this behavior. For instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. Similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size.

+ +

構文

+ +
void ctx.scale(x, y);
+
+ +

引数

+ +
+
x
+
水平方向の拡縮係数。負の値を指定すると、縦軸を跨いでピクセルを反転させます。1 を指定すると、水平方向には拡縮されません。
+
y
+
垂直方向の拡縮係数。負の値を指定すると、横軸を跨いでピクセルを反転させます。1 を指定すると、垂直方向には拡縮されません。
+
+ +

例

+ +

図形を拡縮する

+ +

この例は、拡縮された長方形を描きます。比較のため、元の長方形も描かれます。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

The rectangle has a specified width of 8 and a height of 20. The transformation matrix scales it by 9x horizontally and by 3x vertically. 結果的に、幅は72、高さは60になります。

+ +

キャンバス上の位置が変わることに注意してください。角の位置の指定値が(10, 10)のため、実際の角の位置は(90, 30)になります。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// 拡縮された長方形
+ctx.scale(9, 3);
+ctx.fillStyle = 'red';
+ctx.fillRect(10, 10, 8, 20);
+
+// 変形行列を単位行列に戻す
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+// 原型の長方形
+ctx.fillStyle = 'gray';
+ctx.fillRect(10, 10, 8, 20);
+
+ +

結果

+ +

拡縮された長方形は赤、元の長方形は灰色です。

+ +

{{ EmbedLiveSample('図形を拡縮する', 700, 180) }}

+ +

垂直・水平方向の反転

+ +

You can use scale(-1, 1) to flip the context horizontally and scale(1, -1) to flip it vertically. In this example, the words "Hello world!" are flipped horizontally.

+ +

Note that the call to {{domxref("CanvasRenderingContext2D.fillText()", "fillText()")}} specifies a negative x coordinate. This is to adjust for the negative scaling factor: -280 * -1 becomes 280, and text is drawn leftwards from that point.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.scale(-1, 1);
+ctx.font = '48px serif';
+ctx.fillText('Hello world!', -280, 90);
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

結果

+ +

{{ EmbedLiveSample('垂直・水平方向の反転', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ + + +

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

+ +

参考

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html new file mode 100644 index 0000000000..74051e9a9d --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +
{{APIRef}}
+ +

Canvas 2D APIの{{domxref("CanvasRenderingContext2D")}}インターフェイスのsetLineDash()メソッドは、線を描画するときに使用される線の模様を設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。

+ +
+

注: 線の模様を実線に戻す場合には、指定する配列の中身を空にします。

+
+ +

文法

+ +
ctx.setLineDash(segments);
+
+ +

引数

+ +
+
segments
+
描画する線の長さとその隙間の数値を交互に指定する配列({{jsxref("Array")}}) (座標空間単位)。配列内の要素数が奇数の場合、配列の要素がコピーされて連結されます。 例えば、[5, 15, 25]は[5, 15, 25, 5, 15, 25]になります。 配列が空の場合、ラインダッシュリストはリセットされ、描画される線は実線に戻ります。
+
+ +

例

+ +

簡単な例

+ +

この例では、setLineDash()メソッドを使用して、実線の上に破線を描画します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Dashed line
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Solid line
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Basic_example', 700, 180) }}

+ +

いくつかの一般的な模様

+ +

この例は、さまざまな一般的な破線のパターンを示しています。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

下記のdrawDashedLine()関数を使用すると、複数の破線を簡単に描画できます。引数としてパターン配列を受け取ります。

+ +
function drawDashedLine(pattern) {
+  ctx.beginPath();
+  ctx.setLineDash(pattern);
+  ctx.moveTo(0, y);
+  ctx.lineTo(300, y);
+  ctx.stroke();
+  y += 20;
+}
+
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let y = 15;
+
+drawDashedLine([]);
+drawDashedLine([1, 1]);
+drawDashedLine([10, 10]);
+drawDashedLine([20, 5]);
+drawDashedLine([15, 3, 3, 3]);
+drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
+drawDashedLine([12, 3, 3]);  // [12, 3, 3, 12, 3, 3]と同じ
+
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Some_common_patterns', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html new file mode 100644 index 0000000000..83ea761abf --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html @@ -0,0 +1,175 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.stroke() メソッドは、現在のあるいは渡されたパスを、ノンゼロワインディング規則を使って、現在のストロークスタイルで描きます。

+ +

構文

+ +
void ctx.stroke();
+void ctx.stroke(path);
+
+ +

引数

+ +
+
path
+
描画する {{domxref("Path2D")}} パス。
+
+ +

例

+ +

stroke メソッドを使う

+ +

これは stroke メソッドを使ってパスを描画する、実にシンプルなコード断片です。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+
+ +

下のコードを編集して、変更が canvas に直に反映されることを確認してください。

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ互換性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
パスの引数{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
パスの引数{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参考情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html new file mode 100644 index 0000000000..72471769c4 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -0,0 +1,117 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.strokeRect() メソッドは、矩形の輪郭を現在の {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} とその他のコンテキスト設定によって描画します。

+ +

このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} または {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} の呼び出しには影響を与えません。

+ +

構文

+ +
void ctx.strokeRect(x, y, width, height);
+
+ +

strokeRect() は、座標 (x, y) を始点とする大きさ (width, height) の矩形の輪郭を描画します。

+ +

パラメーター

+ +
+
x
+
矩形の始点となる x 座標。
+
y
+
矩形の始点となる y 座標。
+
width
+
矩形の幅。正の値で右方向、負の値で左方向に描画します。
+
height
+
矩形の高さ。正の値で下方向、負の値で上方向に描画します。
+
+ +

例

+ +

矩形の輪郭

+ +

この例では、 strokeRect() により矩形を緑色の輪郭で描画します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

以下に示される矩形の左上角の座標は (20, 10) です。幅は 160 で、高さは 100 です。

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.strokeStyle = 'green';
+ctx.strokeRect(20, 10, 160, 100);
+
+ +

実行結果

+ +

{{ EmbedLiveSample('矩形の輪郭', 700, 180) }}

+ +

様々なコンテキスト設定の適用

+ +

この例では、面取りされた太い線の矩形を影付きで描画します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.shadowColor = '#d53';
+ctx.shadowBlur = 20;
+ctx.lineJoin = 'bevel';
+ctx.lineWidth = 15;
+ctx.strokeStyle = '#38f';
+ctx.strokeRect(30, 30, 160, 90);
+ +

実行結果

+ +

{{ EmbedLiveSample('様々なコンテキスト設定の適用', 700, 180) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html new file mode 100644 index 0000000000..38b61f3afb --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +
{{APIRef}}
+ +

Canvas 2D API のCanvasRenderingContext2D.strokeStyle プロパティは、図形の輪郭に使用する色、グラデーション、またはパターンを指定します。デフォルト値は #000 (黒色)です。

+ +
+

輪郭と塗りつぶしのスタイル例については、 canvas チュートリアルの スタイルと色を適用する をご覧ください。

+
+ +

構文

+ +
ctx.strokeStyle = color;
+ctx.strokeStyle = gradient;
+ctx.strokeStyle = pattern;
+
+ +

オプション

+ +
+
color
+
CSS の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。
+
gradient
+
{{domxref("CanvasGradient")}} オブジェクト (線形または放射状のグラデーション) 。
+
pattern
+
{{domxref("CanvasPattern")}} オブジェクト (繰り返し画像) 。
+
+ +

例

+ +

図形の輪郭色を変更する

+ +

このサンプルでは青色の輪郭を矩形に適用します。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Changing_the_stroke_color_of_a_shape', 700, 160) }}

+ +

ループを使用した複数の輪郭色の作成

+ +

この例では2つの for ループと、 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} メソッドを使用して、それぞれが異なる輪郭色を持つ円のグリッドを描画します。 このためには、2つの変数 i と j を円ごとに固有となるRGB色を生成するために使用し、また緑色と青色の値だけを変更するようにします (赤色は固定値とします) 。

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+
+for (let i = 0; i < 6; i++) {
+  for (let j = 0; j < 6; j++) {
+    ctx.strokeStyle = `rgb(
+        0,
+        ${Math.floor(255 - 42.5 * i)},
+        ${Math.floor(255 - 42.5 * j)})`;
+    ctx.beginPath();
+    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+    ctx.stroke();
+  }
+}
+
+ +

結果はこのようになります:

+ +

{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ + + +

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

+ + + +

WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド ctx.setStrokeColor() が実装されています。

+ +
setStrokeColor(color, optional alpha);
+setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html new file mode 100644 index 0000000000..173e65157b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -0,0 +1,176 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.strokeText() メソッドは、指定した位置 (x, y) にテキストの輪郭線を描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。

+ +

テキストを塗りつぶして描画するための {{domxref("CanvasRenderingContext2D.fillText()")}} メソッドもご覧ください。

+ +

構文

+ +
void ctx.strokeText(text, x, y [, maxWidth]);
+
+ +

引数

+ +
+
text
+
現在の {{domxref("CanvasRenderingContext2D.font","font")}}、{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction","direction")}} の値を使用して描画するテキスト。
+
+ +
+
x
+
テキストの描画を始める、x 軸の座標。
+
y
+
テキストの描画を始める、y 軸の座標。
+
maxWidth {{optional_inline}}
+
描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。
+
+ +

例

+ +

strokeText メソッドの使用例

+ +

strokeText メソッドを使用する、シンプルなコードスニペットです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="編集" />
+  <input id="reset" type="button" value="リセット" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE(9)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/textalign/index.html b/files/ja/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..f87b9d6e5c --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,178 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.textAlign プロパティは、テキストを描画するときに用いられる現在のテキスト配置を指定します。CanvasRenderingContext2D.fillText メソッドの x の値に基づいて配置されることに注意してください。従って textAlign="center" は、テキストを x-50%*width の位置から描画します。

+ +

構文

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

オプション

+ +

指定可能な値:

+ +
+
left
+
テキストを左揃えにします。
+
right
+
テキストを右揃えにします。
+
center
+
テキストを中央揃えにします。
+
start
+
テキストを行の標準な開始位置から配置します (左から右へのロケールは左揃え、右から左へのロケールは右揃え)。
+
end
+
テキストを行の標準な最終位置から配置します(左から右へのロケールは右揃え、右から左へのロケールは左揃え)。
+
+ +

デフォルト値は start です。

+ +

例

+ +

textAlign プロパティの使用例

+ +

さまざまなテキスト配置を設定するために textAlign プロパティを使用する、シンプルなコードスニペットです。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.textAlign = "left";
+ctx.strokeText("Hello world", 0, 100);
+
+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ + + +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE(9)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ja/web/api/canvasrenderingcontext2d/textbaseline/index.html new file mode 100644 index 0000000000..c5878bd1e5 --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -0,0 +1,150 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +
{{APIRef}}
+ +

Canvas 2D API の CanvasRenderingContext2D.textBaseline プロパティは、テキストを描画するときに用いられる現在のテキストのベースライン (基準線) を指定します。

+ +

構文

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

オプション

+ +

指定可能な値:

+ +
+
top
+
テキストベースラインは em square 一辺が 1 em の正方形 の上になります。
+
hanging
+
テキストベースラインは hanging ベースラインになります。
+
middle
+
テキストベースラインは em square の真ん中になります。
+
alphabetic (default value)
+
テキストベースラインは標準的な alphabetic ベースラインになります。
+
ideographic
+
テキストベースラインは ideographic ベースラインになります。文字の主要範囲の底辺が alphabetic ベースラインの下からはみ出る場合があるのに対し、このラインは主要範囲の底辺そのものを表します。(中国語、日本語、韓国語で意味を持ちます。)
+
bottom
+
テキストベースラインは bounding box の下辺になります。ideographic ベースラインとの違いは、ディセンダー (descenders) をも含めて底辺を決めるかどうかです。
+
+ +

デフォルト値は alphabetic です。

+ +

例

+ +

textBaseline プロパティの使用例

+ +

さまざまなベースライン設定を行う例です。

+ +

HTML

+ +
<canvas id="canvas" width="550" height="500"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
+ctx.font = '36px serif';
+ctx.strokeStyle = 'red';
+
+baselines.forEach(function (baseline, index) {
+    ctx.textBaseline = baseline;
+    var y = 75 + index * 75;
+    ctx.beginPath(); ctx.moveTo(0, y + 0.5); ctx.lineTo(550, y + 0.5); ctx.stroke();
+    ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
+});
+
+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 700) }}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザ実装状況

+ + + +

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

+ +

関連情報

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