diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/canvasrenderingcontext2d | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/canvasrenderingcontext2d')
33 files changed, 5120 insertions, 0 deletions
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 +--- +<div>{{APIRef}} {{obsolete_header}}</div> + +<p>{{domxref("CanvasRenderingContext2D")}} の <strong><code>addHitRegion()</code></strong> メソッドは、ビットマップにヒット領域を追加します。</p> + +<p>Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <em>ctx</em>.addHitRegion(<em>options</em>); +</pre> + +<h3 id="Options" name="Options">オプション</h3> + +<p><code>options</code> 引数は任意です。設定する場合は、次のプロパティを含む {{jsxref("Object")}} を指定します。</p> + +<dl> + <dt><code>path</code></dt> + <dd>ヒット領域をあらわす {{domxref("Path2D")}} オブジェクト。指定されない場合は現在のパスが使われます。</dd> + <dt><code>fillRule</code></dt> + <dd>ある点がヒット領域の中か外かを判断するアルゴリズムです。<br> + 取りうる値は次の通りです。 + <ul> + <li><strong><code>nonzero</code></strong>: <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a> を使用します。既定の規則です。</li> + <li><code><strong>evenodd</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a> を使用します。</li> + </ul> + </dd> + <dt><code>id</code></dt> + <dd>ヒット領域を後で参照するための ID。 ID はイベントなどで使われます。</dd> + <dt><code>parentID</code></dt> + <dd>親ヒット領域の ID。 cursor の継承やアクセシビリティツールによるナビゲーションで利用されます。</dd> + <dt><code>cursor</code></dt> + <dd>この領域にマウスが重なったときに使う {{cssxref("cursor")}} (初期値は <code>inherit</code>)。親ヒット領域があればそこから継承し、なければ、 canvas 要素の cursor から継承します。</dd> + <dt><code>control</code></dt> + <dd>イベントがルートされる要素 (canvasの子孫)。初期値は <code>null</code>。</dd> + <dt><code>label</code></dt> + <dd>control がない場合にヒット領域の説明として使われるテキストラベル (アクセシビリティツール向け)。初期値は<code>null</code>。</dd> + <dt><code>role</code></dt> + <dd>control がない場合にヒット領域の挙動を説明する <a href="/ja/docs/Web/Accessibility/ARIA">ARIA ロール</a> (アクセシビリティツール向け)。初期値は <code>null</code>。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_the_addHitRegion_method" name="Using_the_addHitRegion_method"><code>addHitRegion</code> メソッドの使用</h3> + +<p>これは、 <code>addHitRegion</code> メソッドを使った簡単な例です。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js;">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(); +</pre> + +<p>下のコードを編集すると変更が即座に canvas に反映されます。 (もし、スマイリーが不完全な状態で表示されている場合には、現在のブラウザーがヒット領域に対応しているかどうかをブラウザー互換性表を確認してください。設定で有効化する必要があるかもしれません。)</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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:250px"> +ctx.beginPath(); +ctx.arc(100, 100, 75, 0, 2 * Math.PI, false); +ctx.lineWidth = 5; +ctx.stroke(); + +// 目 +ctx.beginPath(); +ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); +ctx.arc(130, 80, 10, 0, 2 * Math.PI, false); +ctx.fill(); +ctx.addHitRegion({id: "eyes"}); + +// 口 +ctx.beginPath(); +ctx.arc(100, 110, 50, 0, Math.PI, false); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">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(); +}); + +canvas.addEventListener("mousemove", function(event){ + if(event.region) { + alert("痛っ、僕の目だよ"); + } +}); + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 520) }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは <a href="https://github.com/whatwg/html/issues/3407">https://github.com/whatwg/html/issues/3407</a> を参照してください。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.CanvasRenderingContext2D.addHitRegion")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D APIの<strong><code>CanvasRenderingContext2D.arc()</code></strong>メソッドは、パスに円弧を加えます。円弧の中心座標は<em>(x, y)</em>で半径が<em>r</em>、角度<em>startAngle</em>から<em>endAngle</em>まで、<em>anticlockwise</em>の向きに描かれます(デフォルトは時計回り)。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>円弧の中心のx座標値。</dd> + <dt><code>y</code></dt> + <dd>円弧の中心のy座標値。</dd> + <dt><code>radius</code></dt> + <dd>円弧の半径。</dd> + <dt><code>startAngle</code></dt> + <dd>円弧の始まりの角度。x軸の正方向から時計回りに定められるラジアン角。</dd> + <dt><code>endAngle</code></dt> + <dd>円弧の終わりの角度。x軸の正方向から時計回りに定められるラジアン角。</dd> + <dt><code>anticlockwise</code> {{optional_inline}}</dt> + <dd>省略可能な{{jsxref("Boolean")}}。<code>true</code>は、円弧を反時計回りに始まりから終わりの角度に向けて描きます。デフォルトは時計回り。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="Using_the_arc_method" name="Using_the_arc_method"><code>arc()</code>メソッドの使い方</h3> + +<p>このコードは、単純な円の描き方を示しています。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.arc(75, 75, 50, 0, 2 * Math.PI); +ctx.stroke(); +</pre> + +<p>以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">異なった形状の実例</h3> + +<p>以下の例は異なった形を描くことで、<code>arc()()</code>メソッドは何ができるのかを示します。</p> + +<div style="display: none;"> +<h6 id="HTML_2">HTML</h6> + +<pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas> +</pre> + +<h6 id="JavaScript_2">JavaScript</h6> +</div> + +<pre class="brush: js">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(); + } + } +}</pre> + +<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p> + +<h2 id="Geckoについての注釈">Geckoについての注釈</h2> + +<p>Gecko 2.0{{geckoRelease("2.0")}}より:</p> + +<ul> + <li>引数<code>anticlockwise</code>は省略できます。</li> + <li>負の半径を与えると{{domxref("DOMError", "IndexSizeError")}}のエラーが起こります("Index or size is negative or greater than the allowed amount"(インデックスまたはサイズが負数か、範囲を超えた値です)).</li> +</ul> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>このメソッドのインターフェース {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D APIの <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong> メソッドは、2つの制御点と半径を指定して現在のサブパスに円弧を追加します。円弧は現在のパスの最後の点と自動的に直線で連結されます。</p> + +<p>このメソッドは主に角丸の図形を描画するのに使用されます。</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 相対的に大きな半径を指定した場合、得られる角丸の描線が期待するものとは異なる可能性があります: 円弧と連結する直線は円弧の半径に合うように描線されます。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <em>ctx</em>.arcTo(<em>x1</em>, <em>y1</em>, <em>x2</em>, <em>y2</em>, <em>radius</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x1</code></dt> + <dd>1つ目の制御点のx座標。</dd> + <dt><code>y1</code></dt> + <dd>1つ目の制御点のy座標。</dd> + <dt><code>x2</code></dt> + <dd>2つ目の制御点のx座標。</dd> + <dt><code>y2</code></dt> + <dd>2つ目の制御点のy座標。</dd> + <dt><code>radius</code></dt> + <dd>円弧の半径。負でない値を設定する必要があります。</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="arcTo_の仕組み"> arcTo の仕組み</h3> + +<p><code>arcTo()</code> の仕組みを解釈するには、始点と1つ目の制御点を結ぶ直線と、そこから2つ目の制御点を結ぶ直線の2つの線をイメージする方法があります。<code>arcTo()</code>を使用しない場合、これら2つの線分は鋭角を形成しますが、<code>arcTo()</code> はこの鋭角部分に接する円弧を描くことで滑らかに接続します。すなわち、2直線に接する円弧を作成するということになります。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[17]">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(); +</pre> + +<h4 id="Result">Result</h4> + +<p>この例では、<code>arcTo()</code> によって描かれる線を<strong>黒い太線</strong>、<span style="color: gray;">接線を灰色</span>、<span style="color: red;">制御点を赤</span>、<span style="color: blue;">始点となる現在のパスの最後の点を青</span>で描画しています。</p> + +<p>{{ EmbedLiveSample('How_arcTo_works', 315, 165) }}</p> + +<h3 id="角丸図形の作成">角丸図形の作成</h3> + +<p>この例では <code>arcTo()</code>を用いて丸い角をもつ線を描画しています。これが最も一般的な使われ方です。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>描線は直前の<code>moveTo()</code>により座標 (230, 20)から開始し、2つの制御点(90, 130) と (20, 20) を結ぶ直線に接するように形成された半径50の円弧に接続されます。円弧の終端からは <code>lineTo()</code> メソッドにより (20, 20) の点まで直線が描画されます。2つ目の制御点の座標と同じ座標を <code>lineTo()</code> で指定することで、滑らかな描線を得ることができます。</p> + +<pre class="brush: js; highlight:[14]">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(); +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{ EmbedLiveSample('Creating_a_rounded_corner', 315, 165) }}</p> + +<h3 id="大きすぎる半径を指定した場合">大きすぎる半径を指定した場合</h3> + +<p>相対的に大きな半径を指定した場合には、前述の方法では期待されるような滑らかな描線は得られません。この例では、<code>moveTo()</code>後の地点から円弧に接続される線は下方ではなく上方に向かってしまっています。これは、2つの直線に接する円の半径が大き過ぎるために、始点よりも上方に円弧との接点があるために発生しています。</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">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(); +</pre> + +<h4 id="Result_3">Result</h4> + +<p>{{ EmbedLiveSample('Result_of_a_large_radius', 315, 165) }}</p> + +<h3 id="Live_demo">Live demo</h3> + +<p>以下はより洗練されたデモです。半径の変化幅を調節し、どのように描線が変化するかを試すことができます。</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: 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> +</pre> + +<h4 id="JavaScript_4">JavaScript</h4> + +<pre class="brush: js">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);</pre> + +<h4 id="Result_4">Result</h4> + +<div>{{EmbedLiveSample('Live_demo', 315, 200) }}</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> メソッドは、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合、このメソッドを呼び出してください。</p> + +<div class="note"> +<p><strong>注:</strong> 新しいサブパス (つまり、現在のキャンバスの状態に一致するサブパス) を作成する場合、{{domxref("CanvasRenderingContext2D.moveTo()")}}を使用できます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <em>ctx</em>.beginPath(); +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Creating_distinct_paths" name="Creating_distinct_paths">異なるパスの作成</h3> + +<p>この例では、それぞれが1本の直線を含む2つのパスを作成します。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<p><code>beginPath()</code> メソッドはそれぞれの線についての処理開始前に呼ばれるため、各線は別々の色で描かれるでしょう。</p> + +<pre class="brush: js; highlight:[5,12]">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(); +</pre> + +<h4 id="Result" name="Result">実行結果</h4> + +<p>{{ EmbedLiveSample('Creating_distinct_paths', 700, 180) }}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> の一部である<code><strong>CanvasRenderingContext2D.canvas</strong></code> プロパティは、context に関連づけられた {{domxref("HTMLCanvasElement")}} オブジェクトへの読み込み専用の参照です。 {{HTMLElement("canvas")}} に関連づけられていない場合は {{jsxref("null")}} になることがあります。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + +<h2 id="例">例</h2> + +<p>以下の例は HTML ドキュメントに次の {{HTMLElement("canvas")}} 要素があるものとしています:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p><code>CanvasRenderingContext2D</code> の中にある canvas 要素への参照を <code>canvas</code> プロパティから取得できます:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.canvas // HTMLCanvasElement +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} インターフェース</li> + <li><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></li> +</ul> 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 +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearHitRegions()</code></strong>メソッドはcanvasからすべてのヒット領域を削除します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.clearHitRegions();</var> +</pre> + +<h2 id="例">例</h2> + +<h3 id="clearHitRegionsメソッドを使う"><code>clearHitRegions</code>メソッドを使う</h3> + +<p>これは、<code>clearHitRegions</code>メソッドを使った簡単なコードです。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[10]">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(); +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearhitregions", "CanvasRenderingContext2D.clearHitRegions")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(38)}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(38)}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="注記">注記</h3> + +<ul> + <li>[1] この機能はフラグを変更しないと動作しません。有効にするには<code>ExperimentalCanvasFeatures</code>フラグを<code>true</code>に設定してください。</li> + <li>[2] この機能は設定を変更しないと動作しません。about:configで<code>canvas.hitregions.enabled</code>を<code>true</code>に設定してください。</li> +</ul> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</li> + <li>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> は、座標 <em>(x, y)</em> を始点とする大きさ <em>(width, height)</em> の領域を、透明色（透明な黒）で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。</p> + +<h2 id="文法">文法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形領域の始点のX座標を指定します。</dd> + <dt><code>y</code></dt> + <dd>矩形領域の始点のY座標を指定します。</dd> + <dt><code>width</code></dt> + <dd>矩形領域の幅を指定します。</dd> + <dt><code>height</code></dt> + <dd>矩形領域の高さを指定します。</dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p><code>clearRect</code> にちなんでよく起きる問題は <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths">不適切なパス</a>によって起きています。<code>clearRect</code> を呼んで新しいフレームを描画し始める前に {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} を呼ぶのを忘れないようにして下さい。</p> + +<p>訳注:<br> + clearRect() 自体の動作にパスの設定は関係ありません。「clearRect()の後はbeginPath()を呼ばなければならない」というルールはありません。この注釈は「キャンバスをクリアした後って大体新しいフレームを描画しようとするよね。そのときに beginPath() し忘れておかしなことになっているのを clearRect() のせいにしないようにね」ということを言いたいのだと思います。</p> + +<h2 id="使用例">使用例</h2> + +<h3 id="clearRect_の使い方"><code>clearRect</code> の使い方</h3> + +<p><code>clearRect</code> メソッドを使用する単純な例です。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[11]">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); +</pre> + +<p>以下のコードを編集して、変更がどのように適用されるか試してみてください。</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 400)}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ間の互換性">ブラウザ間の互換性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>このメソッドは以下で定義されています。 {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>CanvasRenderingContext2D.closePath()</code></strong> は Canvas 2D API のメソッドで、現在の点から現在のサブパスの開始点までの間に直線を追加することを試みます。図形がすでに閉じていたり、1つしか点がなかったりした場合は、この関数は何もしません。</p> + +<p>このメソッドは canvas に直接は何も描きません。 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} または {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} メソッドを使用してパスを描くことができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <em>ctx</em>.closePath(); +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Closing_a_triangle" name="Closing_a_triangle">三角形を閉じる</h3> + +<p>この例は最初に三角形の2つの (対角の) 辺を <code>lineTo()</code> メソッドを使用して作成します。その後で、図形の最初と最後の点を自動的に接続する <code>closePath()</code> メソッドで、底辺を作成します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The triangle's corners are at (20, 150), (120, 20), and (220, 150).</p> + +<pre class="brush: js; highlight:[8]">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(); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}</p> + +<h3 id="Closing_just_one_sub-path" name="Closing_just_one_sub-path">サブパスを1つだけ閉じる</h3> + +<p>この例では、非接続のサブパス3つからなるスマイリーの顔マークを描画します。</p> + +<div class="blockIndicator note"> +<p>メモ: すべての弧について、作成された後で <code>closePath()</code> が呼び出されていますが、最後の弧 (サブパス) のみが閉じられます。</p> +</div> + +<h4 id="HTML_2" name="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>最初の2つの弧は顔の目を作成します。最後の弧は口を作成します。</p> + +<pre class="brush: js; highlight:[10]">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(); +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li> +</ul> 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 +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D.direction</strong></code> プロパティは、テキストを描画するときに使用する現在の書字方向を指定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var> +</pre> + +<h3 id="Options" name="Options">オプション</h3> + +<p>指定可能な値:</p> + +<dl> + <dt>ltr</dt> + <dd>テキストの書字方向を left-to-right にします。</dd> + <dt>rtl</dt> + <dd>テキストの書字方向を right-to-left にします。</dd> + <dt>inherit</dt> + <dd>テキストの書字方向は {{HTMLElement("canvas")}} 要素または {{domxref("Document")}} から適宜継承します。</dd> +</dl> + +<p>デフォルト値は <code>inherit</code> です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_the_direction_property" name="Using_the_direction_property"><code>direction</code> プロパティの使用例</h3> + +<p>さまざまな書字方向を設定するために <code>direction</code> プロパティを使用する、シンプルなコードスニペットです。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.direction = "ltr"; +ctx.strokeText("Hello world", 0, 100); +</pre> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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.direction = "ltr"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] この機能はデフォルトで無効化されています。有効化するには <code>ExperimentalCanvasFeatures</code> 機能フラグを使用します。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawFocusIfNeeded()</code></strong>メソッドは、パラメーターで与えられた要素がフォーカスした時に、現在のパスもしくは与えられたパスの周りにフォーカスリングを描画します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.drawFocusIfNeeded(element);<var> +void <var><em>ctx</em>.drawFocusIfNeeded(path, element);</var></var></var> +</pre> + +<h3 id="パラメーター">パラメーター</h3> + +<dl> + <dt>element</dt> + <dd>フォーカスしたかどうかをチェックする要素。</dd> + <dt><code>path</code></dt> + <dd>利用する {{domxref("Path2D")}} パス。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="drawFocusIfNeededメソッドを使う"><code>drawFocusIfNeeded</code>メソッドを使う</h3> + +<p>これは、<code>drawFocusIfNeeded</code>メソッドを使った簡単なコードです</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"> + <input id="button" type="range" min="1" max="12"> +</canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[9]">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); +</pre> + +<p>下のコードを編集すると、変更がリアルタイムにcanvasに反映されます:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawfocusifneeded", "CanvasRenderingContext2D.drawFocusIfNeeded")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(29)}}[1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Pathパラメーター</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(29)}}[1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Pathパラメーター</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="注記">注記</h3> + +<ul> + <li>[1] Gecko 28 {{geckoRelease(28)}}ではこのメソッドは "<code>drawSystemFocusRing</code>" として実装されていましたが、Gecko 29 {{geckoRelease(29)}} で名前が変更されました。</li> + <li>[1] Gecko 32 {{geckoRelease(32)}} より前では、このメソッドは設定を変更しないと有効にならず、有効にするには "<code>canvas.focusring.enabled</code>" を変更する必要がありました。</li> +</ul> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}} インタフェースがこのメソッドを定義しています。</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D.ellipse()</strong></code> は Canvas 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); +</pre> + +<p><code>ellipse()</code> メソッドは <code>(x, y)</code> を中心として、 <code>radiusX</code> と <code>radiusY</code> を半径とする楕円の弧を生成します。パスは <code>startAngle</code> から始まって <code>endAngle</code> で終わり、回転方向は <code>anticlockwise</code> で指定します (既定では時計回りです)。</p> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>楕円の中心の X 軸 (水平) 座標です。</dd> + <dt><code>y</code></dt> + <dd>楕円の中心の Y 軸 (垂直) 座標です。</dd> + <dt><code>radiusX</code></dt> + <dd>楕円の長辺の半径です。負の値であってはなりません。</dd> + <dt><code>radiusY</code></dt> + <dd>楕円の短辺の半径です。負の値であってはなりません。</dd> + <dt><code>rotation</code></dt> + <dd>楕円の傾きで、ラジアンで表現します。</dd> + <dt><code>startAngle</code></dt> + <dd>楕円が始まる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。</dd> + <dt><code>endAngle</code></dt> + <dd>楕円が終わる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。</dd> + <dt><code>anticlockwise</code> {{optional_inline}}</dt> + <dd>省略可能な {{jsxref("Boolean")}} の値で、 <code>true</code> の場合は楕円を反時計回りに描きます。既定値は <code>false</code> (時計回り) です。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Drawing_a_full_ellipse" name="Drawing_a_full_ellipse">完全な楕円の描画</h3> + +<p>この例は、 π/4 ラジアンの角度 (45<strong>°</strong>) で楕円を描きます。楕円全体を描くには、弧が 0 ラジアン (0<strong>°</strong>) で始まり、 2π ラジアン (360<strong>°</strong>) で終わるようにします。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas" width="200" height="200"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">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(); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}</p> + +<h3 id="Various_elliptical_arcs" name="Various_elliptical_arcs">様々な楕円の弧</h3> + +<p>この例では、様々な属性の3本の楕円のパスを生成します。</p> + +<h4 id="HTML_2" name="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2" name="JavaScript_2">JavaScript</h4> + +<pre class="brush: js; highlight:[6,11,16]">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(); +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> + <li>真円を描くには {{domxref("CanvasRenderingContext2D.arc()")}} を使用してください。</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> は座標 <em>(<code>x</code>, <code>y</code>)</em> を始点に、大きさ<code>(width</code>, <code>height</code>) の領域を塗りつぶします。塗りつぶす様式は <code>fillStyle</code> 属性に従います。</span></p> + +<h2 id="文法">文法</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形領域の始点のうち、X座標を指定します。</dd> + <dt><code>y</code></dt> + <dd>矩形領域の始点のうち、Y座標を指定します。</dd> + <dt><code>width</code></dt> + <dd>矩形領域の横幅を指定します。</dd> + <dt><code>height</code></dt> + <dd>矩形領域の高さを指定します。</dd> +</dl> + +<h2 id="使用例">使用例</h2> + +<h3 id="fillRect_の使い方"><code>fillRect</code> の使い方</h3> + +<p><code>fillRect</code> メソッドを利用した簡単な使用例です。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">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); +</pre> + +<p>以下のコードを編集して、変更がどのように適用されるか試してみてください。</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ間の互換性">ブラウザ間の互換性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> プロパティは、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。デフォルト値は <code>#000</code> (黒色)です。</p> + +<div class="note"> +<p>輪郭と塗りつぶしのスタイル例については、 <a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial">canvas チュートリアル</a>の <a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" rel="nofollow">スタイルと色を適用する</a> をご覧ください。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><em>ctx</em>.fillStyle = <em>color</em>; +<em>ctx</em>.fillStyle = <em>gradient</em>; +<em>ctx</em>.fillStyle = <em>pattern</em>; +</pre> + +<h3 id="オプション">オプション</h3> + +<dl> + <dt><code>color</code></dt> + <dd><a href="/en-US/docs/Web/CSS">CSS</a> の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。</dd> + <dt><code>gradient</code></dt> + <dd>{{domxref("CanvasGradient")}} オブジェクト (線形または放射状のグラデーション) 。</dd> + <dt><code>pattern</code></dt> + <dd>{{domxref("CanvasPattern")}} オブジェクト (繰り返し画像) 。</dd> +</dl> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>例</strong></span></font></p> + + + +<h3 id="図形の塗色を変更する">図形の塗色を変更する</h3> + +<p>このサンプルでは青色の塗色を矩形に適用します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Changing_the_fill_color_of_a_shape', 700, 160) }}</p> + +<h3 id="ループを使用した複数の塗色の作成">ループを使用した複数の塗色の作成</h3> + +<p>この例では2つの <code>for</code> ループでそれぞれが異なる塗色を持つ四角形のグリッドを描画します。 このためには、2つの変数 <code>i</code> と <code>j</code> を四角形ごとに固有となるRGB色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">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); + } +} +</pre> + +<p>結果はこのようになります:</p> + +<p>{{EmbedLiveSample("Creating_multiple_fill_colors_using_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p> + +<h3 id="WebKitBlink特有のメモ">WebKit/Blink特有のメモ</h3> + +<p>WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド <code>ctx.setFillColor()</code> が実装されています。</p> + +<pre class="brush: js">setFillColor(color, optional alpha); +setFillColor(grayLevel, optional alpha); +setFillColor(r, g, b, a); +setFillColor(c, m, y, k, a); +</pre> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li>このプロパティを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li> + <li>このプロパティで使われる値: + <ul> + <li>{{cssxref("<color>")}} CSS data type</li> + <li>{{domxref("CanvasGradient")}} object</li> + <li>{{domxref("CanvasPattern")}} object</li> + </ul> + </li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D.fillText()</strong></code> メソッドは、指定した位置 <em>(x, y)</em> にテキストを塗りつぶして描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。</p> + +<p>テキストの輪郭線を描画するための {{domxref("CanvasRenderingContext2D.strokeText()")}} メソッドもご覧ください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>text</code></dt> + <dd>現在の {{domxref("CanvasRenderingContext2D.font","font")}}、{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction","direction")}} の値を使用して描画するテキスト。</dd> + <dt><code>x</code></dt> + <dd>テキストの描画を始める、x 軸の座標。</dd> + <dt><code>y</code></dt> + <dd>テキストの描画を始める、y 軸の座標。</dd> + <dt><code>maxWidth</code> {{optional_inline}}</dt> + <dd>描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_the_fillText_method" name="Using_the_fillText_method"><code>fillText</code> メソッドの使用例</h3> + +<p><code>fillText</code> メソッドを使用する、シンプルなコードスニペットです。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.fillText("Hello world", 50, 100); +</pre> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D.font</strong></code> プロパティは、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は <a href="/ja/docs/Web/CSS/font" title="CSS/font">CSS font</a> {{ 原語併記("記述子", "specifier") }} と同じ構文を用います。デフォルトフォントは 10px の{{ 原語併記("サンセリフ", "sans-serif") }} です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var> +</pre> + +<h3 id="Options" name="Options">オプション</h3> + +<dl> + <dt><code>value</code></dt> + <dd>CSS {{cssxref("font")}} の値としてパースされる {{domxref("DOMString")}}。デフォルトのフォントは 10px sans-serif です。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_the_font_property" name="Using_the_font_property"><code>font</code> プロパティの使用例</h3> + +<p>さまざまなフォントサイズやフォントファミリーを設定するために <code>font</code> プロパティを使用する、シンプルなコードスニペットです。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 100); +</pre> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h3 id="Loading_fonts_with_the_CSS_Font_Loading_API" name="Loading_fonts_with_the_CSS_Font_Loading_API">CSS Font Loading API でフォントを読み込む</h3> + +<p>{{domxref("FontFace")}} API の助力により、canvas で使用する前にフォントを明示的に読み込むことができます。</p> + +<pre class="brush: js">var f = new FontFace("test", "url(x)"); + f.load().then(function() { + // canvas コンテキストでフォントを使用する準備ができた +});</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko 固有の注意事項</h2> + +<ul> + <li>Firefox など Gecko ベースのブラウザではこのプロパティのほかに、非標準かつ非推奨の <code>ctx.mozTextStyle</code> を実装しています。これは使用しないでください。</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D.globalCompositeOperation</strong></code>プロパティは、新たな図形を描くときに適用する合成処理の種類を定めます。種類は文字列で、合成やブレンドモードのいずれが用いられるのかを決めます。</p> + +<p>なお、<a href="/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>の<a href="/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositing and clipping</a>の章をご参照ください。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.globalCompositeOperation = 種類;</var></pre> + +<h3 id="種類">種類</h3> +<p>{{EmbedLiveSample("Compositing_example", 750, 7300, "" +,"../../ja/docs/Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p><p> + +</p><h2 id="例">例</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property"><code>globalCompositeOperation</code>プロパティの使い方</h3> + +<p>つぎに抜き書きした簡単なコードは、描かれたふたつの矩形の重なりを<code>globalCompositeOperation</code>プロパティによって除いています。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">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); +</pre> + +<p>以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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:120px;"> +ctx.globalCompositeOperation = "xor"; + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = "red"; +ctx.fillRect(50, 50, 100, 100);</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Compositing')}}</td> + <td>{{Spec2('Compositing')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Blend modes</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("20") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Blend modes</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("20") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="WebKitBlinkについての注釈">WebKit/Blinkについての注釈</h2> + +<ul> + <li>WebKit-とBlink-にもとづくブラウザでは、このプロパティのほかに標準でなく推奨されないメソッド<code>ctx.setCompositeOperation()</code>が実装されています。</li> +</ul> + +<h2 id="Geckoについての注釈">Geckoについての注釈</h2> + +<ul> + <li>初期のCanvas仕様の草案には、値として"darker"が定められていました。しかし、Firefoxはバージョン4で"darker"を除きました({{bug(571532)}}). なお、"darker"に近い効果が得られる値として<code>difference</code>を使うことについて、<a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">ブログ記事</a>の紹介が参考になります。</li> +</ul> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>インタフェースを定義する{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li> +</ul> 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 +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.imageSmoothingEnabled</code></strong> プロパティ は、画像が滑らか（true：既定値）か、またはそうではない（false）かによって、変化するように設定できます。<code>imageSmoothingEnabled</code> プロパティを取得すると、設定された最新の値が返されます。</p> + +<p>このプロパティは、たとえばキャンバスをスケーリングするような、<span>ピクセル</span><span>アート</span><span>をテーマにした</span><span>ゲームに役立ちます。</span> 既定のリサイズアルゴリズムは、ぼやかし効果をかけることで、美しいピクセルを崩してしまいます。このような場合、このプロパティを <code>false</code> に設定します。{{cssxref("image-rendering")}} プロパティも確認してください。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = value;</var></pre> + +<h3 id="オプション">オプション</h3> + +<dl> + <dt><code>value</code></dt> + <dd>滑らかな画像かどうかを示す {{jsxref("Boolean")}} 値。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property"><code>imageSmoothingEnabled</code> プロパティを使用する</h3> + +<p>これは、スケーリングされた画像で <code>imageSmoothingEnabled</code> property プロパティを使用するコードスニペットです。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[7-10]">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); +}; +</pre> + +<p>以下のコードを編集して、canvas で変更がライブアップデートされることを確認してみてください：</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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;"> +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); +};</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>30 [1]</td> + <td>{{ CompatVersionUnknown() }}<br> + {{property_prefix("moz")}}</td> + <td>{{ CompatVersionUnknown() }}<br> + {{property_prefix("ms")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}<br> + {{property_prefix("moz")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] バージョン 29 までは、<code>webkit</code> プレフィックス付きでサポートされています。</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>このプロパティを定義しているインターフェース： {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{cssxref("image-rendering")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> の <code><strong>CanvasRenderingContext2D</strong></code> インターフェイスは、{{ HTMLElement("canvas")}} 要素に描画するための 2D レンダリングコンテキストを提供します。図形、文字、画像、その他のオブジェクトを描画するのに使用します。</span></p> + +<p>詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。<a href="/ja/docs/Web/API/Canvas_API/Tutorial" title="Canvas チュートリアル">Canvas チュートリアル</a> にもより多くの説明やサンプルコード、リソースがあります。</p> + +<h2 id="Basic_example" name="Basic_example">基本的な例</h2> + +<p><code>CanvasRenderingContext2D</code> インスタンスを取得するには、まず連携する HTML <code><canvas></code> 要素が必要です。</p> + +<pre class="brush: html"><canvas id="my-house" width="300" height="300"></canvas></pre> + +<p>この canvas の 2D レンダリングコンテキストを取得するには、引数に <code>'2d'</code> を指定して <code><canvas></code> の {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} を呼び出します。</p> + +<pre class="brush: js">const canvas = document.getElementById('my-house'); +const ctx = canvas.getContext('2d'); +</pre> + +<p>2D レンダリングコンテキストを取得した後は、好きなように描画できます。以下のコードは家を描画します。</p> + +<pre class="brush: js">// 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(); +</pre> + +<p>結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Basic_example", 700, 330)}}</p> + +<h2 id="Reference" name="Reference">リファレンス</h2> + +<h3 id="Drawing_rectangles" name="Drawing_rectangles">矩形の描画</h3> + +<p>ビットマップに対して矩形を直接描画する方法は三つあります。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>座標<em>(x, y)</em> を始点とする大きさ <em>(width, height)</em> の領域を、透明色 (透明な黒) で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>座標<em>(x, y)</em> を始点とし大きさ <em>(width, height)</em> の領域を、(訳注: 現在の塗りつぶしスタイルを用いて) 塗りつぶします。</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>座標<em>(x, y)</em> を始点とし大きさ <em>(width, height)</em> の領域の枠線を、現在のストロークスタイルを用いて描画します。</dd> +</dl> + +<h3 id="Drawing_text" name="Drawing_text">文字列の描画</h3> + +<p>以下のメソッドは、文字列の描画を提供します。文字列のプロパティについては {{domxref("TextMetrics")}} も参照してください。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>現在の塗りつぶしスタイルを用いて、文字の内部を塗りつぶします。</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>現在のストロークスタイルを用いて、文字の輪郭を描画します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>{{domxref("TextMetrics")}} オブジェクトを返します。</dd> +</dl> + +<h3 id="Line_styles" name="Line_styles">線のスタイル</h3> + +<p>線がどのように描画されるかを設定・取得します。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>線の幅を設定します。デフォルトは <code>1.0</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>線の末端のスタイルを設定します。設定可能な値は <code>butt</code> (デフォルト), <code>round</code>, <code>square</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>2 つの直線が出会う頂点のスタイルを設定します。設定可能な値は <code>round</code>, <code>bevel</code>, <code>miter</code> (デフォルト) です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Miter limit を設定します。デフォルトは <code>10</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>現在の破線パターンを格納した配列を取得します。この配列には負でない実数が偶数個含まれています。</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>破線パターンを指定します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>線のどこから破線にするかを指定します。</dd> +</dl> + +<h3 id="Text_styles" name="Text_styles">文字列のスタイル</h3> + +<p>以下のプロパティは、テキストがどのように配置されるかを制御します。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>フォントを設定します。デフォルト値は <code>10px sans-serif</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>テキストの揃え方を設定します。設定可能な値は以下の通りです: <code>start</code> (デフォルト), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>。</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>ベースラインの揃え方を設定します。設定可能な値は以下の通りです: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (デフォルト), <code>ideographic</code>, <code>bottom</code>。</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>テキストの方向を指定します。設定可能な値は以下の通りです: <code>ltr</code>, <code>rtl</code>, <code>inherit</code> (デフォルト)。</dd> +</dl> + +<h3 id="Fill_and_stroke_styles" name="Fill_and_stroke_styles">塗りつぶしとストロークのスタイル</h3> + +<p>塗りつぶしには図形の内部の色やスタイルの設定に、ストロークには図形の輪郭の色やスタイルの設定に使用されます。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>図形の内側を色やスタイルで指定します。 デフォルト値は <code>#000</code> (黒) です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>図形の輪郭を色やスタイルで指定します。 デフォルト値は <code>#000</code> (黒) です。</dd> +</dl> + +<h3 id="Gradients_and_patterns" name="Gradients_and_patterns">グラデーションとパターン</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>パラメーターの座標から線に沿った線形のグラデーションを作成します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>パラメーターの座標から2つの円の座標を利用して放射状のグラデーションを作成します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>指定されたイメージソース ({{domxref("CanvasImageSource")}}) を利用してパターンイメージを作成します。そのパターンイメージからパラメーターの方向に繰り返します。このメソッドは {{domxref("CanvasPattern")}} で出力します。</dd> +</dl> + +<h3 id="Shadows" name="Shadows">影のスタイル</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>影のぼかしを設定します。デフォルト値は <code>0</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>影の色を設定します。デフォルト値は完全に透明の黒です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>横方向の影の長さを設定します。デフォルト値は <code>0</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>縦方向の影の長さを設定します。デフォルト値は <code>0</code> です。</dd> +</dl> + +<h3 id="Paths" name="Paths">パスの作成</h3> + +<p>以下のメソッドはオブジェクトのパスの操作で使用できます。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>すでにあるサブパスのリストを消去して新しいパスの起点を作成します。パスを作成したい時にこのメソッドを利用します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>(x, y) 座標へ作成済みのサブパスの始点を移動します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>現在のパスに 3 次元のベジェ曲線を追加します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>現在のパスに 2 次元のベジェ曲線を追加します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>現在のパスに円弧を追加します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>パラメーターの制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>現在のパスに楕円形の円弧を追加します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>パラメーターの座標 (x, y) から <em>width</em> と <em>height</em> のサイズで長方形のパスを作成します。</dd> +</dl> + +<h3 id="Drawing_paths" name="Drawing_paths">パスを描画する</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>塗りつぶしのスタイルに基づいてサブパス内を塗りつぶします。</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>ストロークのスタイルに基づいてサブパスを描画します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>パラメーターで指定した要素がフォーカスされた場合、このメソッドは現在のパスの周りにフォーカスリングを描画します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>現在のパスかパラメーターで指定したパスが表示範囲に入るまでスクロールします。</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>現在のサブパスからクリッピングパスを作成します。このメソッドが実行されると、後に描画されたものがすべてそのクリッピングパスの内側にだけ描画されます。サンプルは Canvas チュートリアルの <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> をご参照ください。</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>パラメーターで指定した位置が現在のパスの中に含まれているか調べます。</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>パラメーターで指定した位置がパスでストロークした領域の中に含まれているか調べます。</dd> +</dl> + +<h3 id="Transformations" name="Transformations">図形の変形</h3> + +<p><code>CanvasRenderingContext2D</code> のレンダリングコンテキストのオブジェクトには現在の変換行列の状態とその変換行列を操作するメソッドがあります。現在のデフォルトパスを作成したり、テキスト、図形、{{domxref("Path2D")}} を描くと変換行列が適用されます。下記に紹介するメソッドは過去の事情や互換性を確保する理由で残されていて、{{domxref("SVGMatrix")}} オブジェクトがその API の大部分で使用されています。将来は {{domxref("SVGMatrix")}} の代わりに {{domxref("DOMMatrix")}} を利用したメソッドが使用されることになります。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt> + <dd>現在の変換行列 ({{domxref("SVGMatrix")}} オブジェクト)。</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>変換行列に回転を追加します。パラメーターの角度は時計回りをラジアン値で指定します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>キャンバスに対して X で横方向に、Y で縦方向にスケーリング変換を追加します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>キャンバスと指定した原点に対して X で横方向に、Y で縦方向にグリッド状で移動して、平行移動の変形を追加します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>現在の変換行列とパラメーターで指定した行列を乗算します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>現在の変換行列を単位行列にリセットしてから、パラメーターで指定した行列から <code>transform()</code> メソッドを実行します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>現在の変換行列を単位行列にリセットします。</dd> +</dl> + +<h3 id="Compositing" name="Compositing">合成</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>合成される前に適用されるキャンバス内の図形やイメージの透明度です。デフォルト値は <code>1.0</code> (不透明) です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd><code>globalAlpha</code> で設定した透明度を利用して、これまで描画された図形やイメージの描画方法を設定します。</dd> +</dl> + +<h3 id="Drawing_images" name="Drawing_images">画像の描画</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>指定したイメージを描画します。このメソッドでは指定方法が多く、大きな柔軟性を持ちます。</dd> +</dl> + +<h3 id="Pixel_manipulation" name="Pixel_manipulation">ピクセル操作</h3> + +<p>{{domxref("ImageData")}} も併せてご参照ください。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>パラメーターで指定した領域から空の {{domxref("ImageData")}} オブジェクトを作成します。そのオブジェクトはすべてのピクセルが透明な黒で構成されています。</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>キャンバス内の座標 <em>(sx, sy)</em> から 幅 <em>sw</em> と 高さ <em>sh</em> のサイズで示される基本のピクセルデータの {{domxref("ImageData")}} オブジェクトを取得します。</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>パラメーターで指定した {{domxref("ImageData")}} オブジェクトのデータをビットマップ上に描画します。不適切な四角形が指定された場合は、その四角形のピクセルだけが描画されます。</dd> +</dl> + +<h3 id="Image_smoothing" name="Image_smoothing">画像の平滑化</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> +</dl> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingQuality")}} {{experimental_inline}}</dt> + <dd>Allows you to set the quality of image smoothing.</dd> +</dl> + +<h3 id="キャンバスの状態">キャンバスの状態</h3> + +<p>The <code>CanvasRenderingContext2D</code> 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:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h3 id="Hit_regions" name="Hit_regions">キャンバスの当たり判定</h3> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Adds a hit region to the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Removes all hit regions from the canvas.</dd> +</dl> + +<h3 id="Filters" name="Filters">フィルター</h3> + +<dl> + <dt>{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd>Applys a CSS and SVG filter to the Canvas, e.g. to change the brightness or blur the canvas.</dd> +</dl> + +<h2 id="Non-standard_APIs" name="Non-standard_APIs">非標準 API</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and were removed shortly after Chrome 36</a>.</p> + +<dl> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> +</dl> + +<h3 id="Blink_only" name="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only" name="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only" name="Gecko_only">Gecko only</h3> + +<h4 id="Prefixed_APIs" name="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>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.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)" name="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer" name="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> +</dl> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.CanvasRenderingContext2D")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{HTMLElement("canvas")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<div>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> プロパティは、描線の端点の形状を設定します。</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 描線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、 {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} のメソッドで行われます。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>ctx</em>.lineCap = "butt" || "round" || "square"; +</pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>"butt"</code></dt> + <dd>端点は四角く切られます。デフォルト値です。</dd> + <dt><code>"round"</code></dt> + <dd>端点は丸くなります。</dd> + <dt><code>"square"</code></dt> + <dd>端点に線幅と同じ幅で高さが半分の四角形が描き加えられます。</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="線の先端の形を変える">線の先端の形を変える</h3> + +<p>この例では直線の端点を丸めています。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[7]">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(); +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}</p> + +<h3 id="先端形状の比較">先端形状の比較</h3> + +<p>次の例では、<code>lineCap</code> プロパティがそれぞれ異なる3本の線を描画しています。その違いを観察するために、2本の補助線を引いています。3本の線はそれぞれこの補助線直上を始点および終点として描かれています。</p> + +<p>左の線はデフォルトのオプション <code>"butt"</code> の場合の描線で、補助線のところで丁度切れています。2つ目の<code>"round"</code> オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の<code>"square"</code> オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">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(); +} +</pre> + +<p>{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p> + +<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3> + +<ul> + <li>In WebKit- and Blink-based Browsers, a non-standard and deprecated method <code>ctx.setLineCap()</code> is implemented in addition to this property.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining this property: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> メソッドは、直線でサブパスの終点を <code>x</code> と <code>y</code> の座標へ接続します（この線は実際には描画されません）。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>線の終点の x 座標。</dd> + <dt><code>y</code></dt> + <dd>線の終点の y 座標。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="lineTo_メソッドを使う"><code>lineTo</code> メソッドを使う</h3> + +<p>これは lineTo メソッドを使った実にシンプルなコード断片です。{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} を使って直線を描くパスを開始し 、ペンを {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}} で動かし、そして {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} メソッドを使って実際に線を描画します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(100, 100); +ctx.stroke(); +</pre> + +<p>下のコードを編集して、変更が canvas に直に反映されることを確認してください。</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D.measureText()</strong></code> メソッドは、測定したテキストの情報 (例えば幅など) を持つ {{domxref("TextMetrics")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">TextMetrics <var><em>ctx</em></var>.measureText(text);</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt>text</dt> + <dd>測定する文字列。</dd> +</dl> + +<h3 id="戻り値">戻り値</h3> + +<p>{{domxref("TextMetrics")}} オブジェクト。</p> + +<h2 id="例">例</h2> + +<p>以下の {{HTMLElement("canvas")}} 要素があるとします:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>以下のコードを使用して {{domxref("TextMetrics")}} オブジェクトを得ることができます:</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var text = ctx.measureText("foo"); // TextMetrics オブジェクト +text.width; // 16; +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("TextMetrics")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> メソッドは、新しいサブパスの始点を <code>(x, y)</code> 座標に移動します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>点の x (水平) 座標。</dd> + <dt><code>y</code></dt> + <dd>点の y (鉛直) 座標。</dd> +</dl> + +<h2 id="Parameters" name="Parameters">例</h2> + +<h3 id="Creating_multiple_sub-paths" name="Creating_multiple_sub-paths">複数のサブパスを作成する</h3> + +<p>この例は、<code>moveTo()</code> を使用して、1 つのパス内に 2 つのサブパスを作成します。サブパスは両方とも <code>stroke()</code> を 1 回呼び出すことで、レンダリングできます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>最初の線は、(50, 50) が始点で (200, 50) が終点です。二番目の線は、(50, 90) が始点で (280, 120) が終点です。</p> + +<pre class="brush: js; highlight:[5,7]">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(); +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Creating_multiple_sub-paths', 700, 180) }}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> メソッドは、2Dウィンドウのサイズ(width, height)や開始位置(x, y)を定義できるメソッドです。</p> + +<p>ウィンドウのサイズと開始位置をもとに直線で引かれたウィンドウが2Dウィンドウになり、<code>fill</code>メソッドでウィンドウ内の塗りつぶしをしたり、<code>stroke</code>メソッドでウィンドウの外周を直線で囲み、可視化することなどできます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var> +</pre> + +<h3 id="パラメーター">パラメーター</h3> + +<dl> + <dt><code>x</code></dt> + <dd> + <p>2Dウィンドウの開始位置(x軸)</p> + </dd> + <dt><code>y</code></dt> + <dd> + <p>2Dウィンドウの開始位置(y軸)</p> + </dd> + <dt><code>width</code></dt> + <dd> + <p>2Dウィンドウの幅</p> + </dd> + <dt><code>height</code></dt> + <dd> + <p>2Dウィンドウの高さ</p> + </dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="rect_メソッドの使用方法"> <code>rect</code> メソッドの使用方法</h3> + +<p>この例は、 <code>rect</code> メソッドを使用してウィンドウの作成をするシンプルなコードです。<br> + 内容は、canvas内に作成したウィンドウに対して、{{domxref("CanvasRenderingContext2D.fill", "fill()")}} を実行し、ウィンドウ内を黒塗りにしているだけになります。<br> + 上に記載してあるウィンドウを黒塗りする {{domxref("CanvasRenderingContext2D.fill", "fill()")}} 以外にも、</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}</li> +</ul> + +<p>などが存在しているので、参考にしてみてください。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>下のコードを変更してみよう:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="仕様書">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> 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 +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.removeHitRegion()</code></strong> メソッドは、canvasから与えられたヒット領域を削除します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.removeHitRegion(id);</var> +</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<dl> + <dt>id</dt> + <dd>削除する領域の<code>id</code>をあらわす{{domxref("DOMString")}}。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="removeHitRegionメソッドを使う"><code>removeHitRegion</code>メソッドを使う</h3> + +<p>これは、<code>removeHitRegion</code>を使った簡単なコードです。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +// ヒット領域を指定 +ctx.addHitRegion({id: "eyes"}); + +// canvasからヒット領域を削除 +ctx.removeHitRegion("eyes"); +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-removehitregion", "CanvasRenderingContext2D.removeHitRegion")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatGeckoDesktop(30)}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(30)}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="注記">注記</h3> + +<ul> + <li>[1] この機能はフラグを変更しないと動作しません。有効にするには<code>ExperimentalCanvasFeatures</code>フラグを<code>true</code>に設定してください。</li> + <li>[2] この機能は設定を変更しないと動作しません。about:configで<code>canvas.hitregions.enabled</code>を<code>true</code>に設定してください。</li> +</ul> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> メソッドは、現在の状態をプッシュしてキャンバスの全体の状態をスタックに保存します。</p> + +<h3 id="The_drawing_state" name="The_drawing_state">描画状態</h3> + +<p>スタックに保存される描画状態には以下のものが含まれます:</p> + +<ul> + <li>現在の変形行列。</li> + <li>現在のクリッピング領域。</li> + <li>現在の点線リスト。</li> + <li>以下の属性の現在の値: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}、 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}、{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}、{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}、{{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}、{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}、{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}、{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}、{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}、{{domxref("CanvasRenderingContext2D.font", "font")}}、{{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction", "direction")}}、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}。</li> +</ul> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <em>ctx</em>.save();</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Saving_the_drawing_state" name="Saving_the_drawing_state">描画状態を保存する</h3> + +<p>この例は、<code>save()</code> メソッドを使用してデフォルトの状態を保存して、<code>restore()</code> を使用して復元しているため、デフォルトの状態で長方形を描画できます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">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); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D APIの<code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong>メソッドは、キャンバス上の長さを縦方向及び横方向に拡縮する変形を適用させます。</p> + +<p>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.</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">void <em>ctx</em>.scale(<em>x</em>, <em>y</em>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>水平方向の拡縮係数。負の値を指定すると、縦軸を跨いでピクセルを反転させます。<code>1</code> を指定すると、水平方向には拡縮されません。</dd> + <dt><code>y</code></dt> + <dd>垂直方向の拡縮係数。負の値を指定すると、横軸を跨いでピクセルを反転させます。<code>1</code> を指定すると、垂直方向には拡縮されません。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="図形を拡縮する">図形を拡縮する</h3> + +<p>この例は、拡縮された長方形を描きます。比較のため、元の長方形も描かれます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>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になります。</p> + +<p>キャンバス上の位置が変わることに注意してください。角の位置の指定値が(10, 10)のため、実際の角の位置は(90, 30)になります。</p> + +<pre class="brush: js; highlight:[5] notranslate">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); +</pre> + +<h4 id="結果">結果</h4> + +<p>拡縮された<span style="color: red;">長方形は赤</span>、<span style="color: gray;">元の長方形は灰色です</span>。</p> + +<p>{{ EmbedLiveSample('図形を拡縮する', 700, 180) }}</p> + +<h3 id="垂直・水平方向の反転">垂直・水平方向の反転</h3> + +<p>You can use <code>scale(-1, 1)</code> to flip the context horizontally and <code>scale(1, -1)</code> to flip it vertically. In this example, the words "Hello world!" are flipped horizontally.</p> + +<p>Note that the call to {{domxref("CanvasRenderingContext2D.fillText()", "fillText()")}} specifies a negative x coordinate. This is to adjust for the negative scaling factor: <code>-280 * -1</code> becomes <code>280</code>, and text is drawn leftwards from that point.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js; highlight:[4] notranslate">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); +</pre> + +<h4 id="結果_2">結果</h4> + +<p>{{ EmbedLiveSample('垂直・水平方向の反転', 700, 180) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>このメソッドを定義するインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D APIの{{domxref("CanvasRenderingContext2D")}}インターフェイスの<code>setLineDash()</code>メソッドは、線を描画するときに使用される線の模様を設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。</p> + +<div class="note"> +<p><strong>注:</strong> 線の模様を実線に戻す場合には、指定する配列の中身を空にします。</p> +</div> + +<h2 id="文法">文法</h2> + +<pre class="syntaxbox notranslate"><em>ctx</em>.setLineDash(<em>segments</em>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>segments</code></dt> + <dd>描画する線の長さとその隙間の数値を交互に指定する配列({{jsxref("Array")}}) (座標空間単位)。配列内の要素数が奇数の場合、配列の要素がコピーされて連結されます。 例えば、<code>[5, 15, 25]</code>は<code>[5, 15, 25, 5, 15, 25]</code>になります。 配列が空の場合、ラインダッシュリストはリセットされ、描画される線は実線に戻ります。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="簡単な例">簡単な例</h3> + +<p>この例では、<code>setLineDash()</code>メソッドを使用して、実線の上に破線を描画します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6, 13] notranslate">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(); +</pre> + +<h4 id="実行結果">実行結果</h4> + +<p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p> + +<h3 id="いくつかの一般的な模様">いくつかの一般的な模様</h3> + +<p>この例は、さまざまな一般的な破線のパターンを示しています。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>下記の<code>drawDashedLine()</code>関数を使用すると、複数の破線を簡単に描画できます。引数としてパターン配列を受け取ります。</p> + +<pre class="brush: js notranslate">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]と同じ + +</pre> + +<h4 id="実行結果_2">実行結果</h4> + +<p>{{ EmbedLiveSample('Some_common_patterns', 700, 180) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェース:{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> メソッドは、現在のあるいは渡されたパスを、ノンゼロワインディング規則を使って、現在のストロークスタイルで描きます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var> +void <var><em>ctx</em>.stroke(path);</var> +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>path</code></dt> + <dd>描画する {{domxref("Path2D")}} パス。</dd> +</dl> + +<h2 id="例">例</h2> + +<h3 id="stroke_メソッドを使う"><code>stroke</code> メソッドを使う</h3> + +<p>これは <code>stroke</code> メソッドを使ってパスを描画する、実にシンプルなコード断片です。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +</pre> + +<p>下のコードを編集して、変更が canvas に直に反映されることを確認してください。</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>パスの引数</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(31) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>パスの引数</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile(31) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイス: {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> メソッドは、矩形の輪郭を現在の {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} とその他のコンテキスト設定によって描画します。</p> + +<p>このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} または {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} の呼び出しには影響を与えません。</p> + +<h2 id="構文" name="構文">構文</h2> + +<pre class="syntaxbox">void <em>ctx</em>.strokeRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>); +</pre> + +<p><code>strokeRect()</code> は、座標 <code>(x, y)</code> を始点とする大きさ <code>(width, height)</code> の矩形の輪郭を描画します。</p> + +<h3 id="パラメーター" name="パラメーター">パラメーター</h3> + +<dl> + <dt><code>x</code></dt> + <dd>矩形の始点となる x 座標。</dd> + <dt><code>y</code></dt> + <dd>矩形の始点となる y 座標。</dd> + <dt><code>width</code></dt> + <dd>矩形の幅。正の値で右方向、負の値で左方向に描画します。</dd> + <dt><code>height</code></dt> + <dd>矩形の高さ。正の値で下方向、負の値で上方向に描画します。</dd> +</dl> + +<h2 id="例" name="例">例</h2> + +<h3 id="矩形の輪郭" name="矩形の輪郭">矩形の輪郭</h3> + +<p>この例では、 <code>strokeRect()</code> により矩形を緑色の輪郭で描画します。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<p>以下に示される矩形の左上角の座標は (20, 10) です。幅は 160 で、高さは 100 です。</p> + +<pre class="brush: js; highlight:[4]">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +ctx.strokeStyle = 'green'; +ctx.strokeRect(20, 10, 160, 100); +</pre> + +<h4 id="実行結果" name="実行結果">実行結果</h4> + +<p>{{ EmbedLiveSample('矩形の輪郭', 700, 180) }}</p> + +<h3 id="様々なコンテキスト設定の適用">様々なコンテキスト設定の適用</h3> + +<p>この例では、面取りされた太い線の矩形を影付きで描画します。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">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);</pre> + +<h4 id="実行結果_2">実行結果</h4> + +<p>{{ EmbedLiveSample('様々なコンテキスト設定の適用', 700, 180) }}</p> + +<h2 id="仕様" name="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>このメソッドを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の<code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> プロパティは、図形の輪郭に使用する色、グラデーション、またはパターンを指定します。デフォルト値は <code>#000</code> (黒色)です。</p> + +<div class="note"> +<p>輪郭と塗りつぶしのスタイル例については、 <a href="/ja/docs/Web/API/Canvas_API/Tutorial">canvas チュートリアル</a>の <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a> をご覧ください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>ctx</em>.strokeStyle = <em>color</em>; +<em>ctx</em>.strokeStyle = <em>gradient</em>; +<em>ctx</em>.strokeStyle = <em>pattern</em>; +</pre> + +<h3 id="Options" name="Options">オプション</h3> + +<dl> + <dt><code>color</code></dt> + <dd><a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("<color>")}} として解析される {{domxref("DOMString")}} 。</dd> + <dt><code>gradient</code></dt> + <dd>{{domxref("CanvasGradient")}} オブジェクト (線形または放射状のグラデーション) 。</dd> + <dt><code>pattern</code></dt> + <dd>{{domxref("CanvasPattern")}} オブジェクト (繰り返し画像) 。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Changing_the_stroke_color_of_a_shape" name="Changing_the_stroke_color_of_a_shape">図形の輪郭色を変更する</h3> + +<p>このサンプルでは青色の輪郭を矩形に適用します。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.strokeStyle = 'blue'; +ctx.strokeRect(10, 10, 100, 100); +</pre> + +<h4 id="Result" name="Result">実行結果</h4> + +<p>{{ EmbedLiveSample('Changing_the_stroke_color_of_a_shape', 700, 160) }}</p> + +<h3 id="Creating_multiple_stroke_colors_using_loops" name="Creating_multiple_stroke_colors_using_loops">ループを使用した複数の輪郭色の作成</h3> + +<p>この例では2つの <code>for</code> ループと、 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} メソッドを使用して、それぞれが異なる輪郭色を持つ円のグリッドを描画します。 このためには、2つの変数 <code>i</code> と <code>j</code> を円ごとに固有となるRGB色を生成するために使用し、また緑色と青色の値だけを変更するようにします (赤色は固定値とします) 。</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">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(); + } +} +</pre> + +<p>結果はこのようになります:</p> + +<p>{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p> + +<h3 id="WebKitBlink-specific_note" name="WebKitBlink-specific_note">WebKit/Blink特有のメモ</h3> + +<p>WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド <code>ctx.setStrokeColor()</code> が実装されています。</p> + +<pre class="brush: js">setStrokeColor(color, optional alpha); +setStrokeColor(grayLevel, optional alpha); +setStrokeColor(r, g, b, a); +setStrokeColor(c, m, y, k, a); +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このプロパティを定義しているインターフェース: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> メソッドは、指定した位置 <em>(x, y)</em> にテキストの輪郭線を描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。</p> + +<p>テキストを塗りつぶして描画するための {{domxref("CanvasRenderingContext2D.fillText()")}} メソッドもご覧ください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(text, x, y [, maxWidth]);</var> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>text</code></dt> + <dd>現在の {{domxref("CanvasRenderingContext2D.font","font")}}、{{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction","direction")}} の値を使用して描画するテキスト。</dd> +</dl> + +<dl> + <dt><code>x</code></dt> + <dd>テキストの描画を始める、x 軸の座標。</dd> + <dt><code>y</code></dt> + <dd>テキストの描画を始める、y 軸の座標。</dd> + <dt><code>maxWidth</code> {{optional_inline}}</dt> + <dd>描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_the_strokeText_method" name="Using_the_strokeText_method"><code>strokeText</code> メソッドの使用例</h3> + +<p><code>strokeText</code> メソッドを使用する、シンプルなコードスニペットです。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 100); +</pre> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D.textAlign</strong></code> プロパティは、テキストを描画するときに用いられる現在のテキスト配置を指定します。CanvasRenderingContext2D.<strong>fillText</strong> メソッドの x の値に基づいて配置されることに注意してください。従って textAlign="center" は、テキストを x-50%*width の位置から描画します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> +</pre> + +<h3 id="Options" name="Options">オプション</h3> + +<p>指定可能な値:</p> + +<dl> + <dt>left</dt> + <dd>テキストを左揃えにします。</dd> + <dt>right</dt> + <dd>テキストを右揃えにします。</dd> + <dt>center</dt> + <dd>テキストを中央揃えにします。</dd> + <dt>start</dt> + <dd>テキストを行の標準な開始位置から配置します (左から右へのロケールは左揃え、右から左へのロケールは右揃え)。</dd> + <dt>end</dt> + <dd>テキストを行の標準な最終位置から配置します(左から右へのロケールは右揃え、右から左へのロケールは左揃え)。</dd> +</dl> + +<p>デフォルト値は <code>start</code> です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property"><code>textAlign</code> プロパティの使用例</h3> + +<p>さまざまなテキスト配置を設定するために <code>textAlign</code> プロパティを使用する、シンプルなコードスニペットです。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.textAlign = "left"; +ctx.strokeText("Hello world", 0, 100); +</pre> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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.textAlign = "left"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Canvas 2D API の <code><strong>CanvasRenderingContext2D.textBaseline</strong></code> プロパティは、テキストを描画するときに用いられる現在のテキストのベースライン (基準線) を指定します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var> +</pre> + +<h3 id="オプション">オプション</h3> + +<p>指定可能な値:</p> + +<dl> + <dt>top</dt> + <dd>テキストベースラインは em square 一辺が 1 em の正方形 の上になります。</dd> + <dt>hanging</dt> + <dd>テキストベースラインは hanging ベースラインになります。</dd> + <dt>middle</dt> + <dd>テキストベースラインは em square の真ん中になります。</dd> + <dt>alphabetic (default value)</dt> + <dd>テキストベースラインは標準的な alphabetic ベースラインになります。</dd> + <dt>ideographic</dt> + <dd>テキストベースラインは ideographic ベースラインになります。文字の主要範囲の底辺が alphabetic ベースラインの下からはみ出る場合があるのに対し、このラインは主要範囲の底辺そのものを表します。(中国語、日本語、韓国語で意味を持ちます。)</dd> + <dt>bottom</dt> + <dd>テキストベースラインは bounding box の下辺になります。ideographic ベースラインとの違いは、ディセンダー (descenders) をも含めて底辺を決めるかどうかです。</dd> +</dl> + +<p>デフォルト値は <code>alphabetic</code> です。</p> + +<h2 id="例">例</h2> + +<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property"><code>textBaseline</code> プロパティの使用例</h3> + +<p>さまざまなベースライン設定を行う例です。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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); +}); +</pre> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="550" height="500" 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"> +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); +}); +</textarea></pre> + +<pre class="brush: js">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.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); + ctx.restore(); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 700) }}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>このメソッドを定義するインターフェイスである {{domxref("CanvasRenderingContext2D")}}</li> +</ul> |