diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-14 11:07:46 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-14 11:07:46 +0900 |
| commit | 03385cc9f4f157cec2e5fd05f35e6af646055908 (patch) | |
| tree | 445fcb3a7d033d4ef35c4d4238b28b9630e3dc5b /files/ja/web/api/canvas_api | |
| parent | b8899e350326af3e53dfad89747761c1c13a3915 (diff) | |
| download | translated-content-03385cc9f4f157cec2e5fd05f35e6af646055908.tar.gz translated-content-03385cc9f4f157cec2e5fd05f35e6af646055908.tar.bz2 translated-content-03385cc9f4f157cec2e5fd05f35e6af646055908.zip | |
Web/API以下の文書内のリンクURLを正規化 (#2360)
- /en-US へのリンクを /ja へのリンクに修正
- /ja が付いていないものに /ja を付加
- MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正
Diffstat (limited to 'files/ja/web/api/canvas_api')
6 files changed, 21 insertions, 21 deletions
diff --git a/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html index c30d28749b..00e6f95b4d 100644 --- a/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -11,7 +11,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> <div class="summary"> -<p>前の章では、いくつかの<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基本的なアニメーション</a>を作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。</p> +<p>前の章では、いくつかの<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基本的なアニメーション</a>を作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。</p> </div> <h2 id="ボールを描く">ボールを描く</h2> @@ -46,7 +46,7 @@ ball.draw();</pre> <h2 id="速度の追加">速度の追加</h2> -<p>ボールが手に入りましたので、このチュートリアルの<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">前の章</a>で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.</p> +<p>ボールが手に入りましたので、このチュートリアルの<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">前の章</a>で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.</p> <pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -291,7 +291,7 @@ ball.draw();</pre> <h2 id="マウスコントロールの追加">マウスコントロールの追加</h2> -<p>ボールに対するちょっとした制御をするために、たとえば <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> イベントを使用してボールをマウスの動きに従わせる。といったことができます。<code><a href="/en-US/docs/Web/Events/click">click </a></code>イベントでボールを開放して、またバウンドさせる。といったことも可能です。</p> +<p>ボールに対するちょっとした制御をするために、たとえば <code><a href="/ja/docs/Web/Reference/Events/mousemove">mousemove</a></code> イベントを使用してボールをマウスの動きに従わせる。といったことができます。<code><a href="/ja/docs/Web/Events/click">click </a></code>イベントでボールを開放して、またバウンドさせる。といったことも可能です。</p> <div class="hidden"> <pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -369,13 +369,13 @@ ball.draw(); <h2 id="ブロック崩し">ブロック崩し</h2> -<p>This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> game? Checkout our <a href="/en-US/docs/Games">Game development</a> area for more gaming related articles.</p> +<p>This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> game? Checkout our <a href="/ja/docs/Games">Game development</a> area for more gaming related articles.</p> <h2 id="関連項目">関連項目</h2> <ul> <li>{{domxref("window.requestAnimationFrame()")}}</li> - <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> + <li><a href="/ja/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li> </ul> <p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index b712ab8f22..effa055a25 100644 --- a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -7,7 +7,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> <div class="summary"> -<p>「<a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">canvas に図形を描く</a>」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。</p> +<p>「<a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">canvas に図形を描く</a>」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。</p> </div> <h2 id="Colors" name="Colors">色</h2> @@ -424,7 +424,7 @@ draw();</pre> <p>The <code>setLineDash</code> method and the <code>lineDashOffset</code> property specify the dash pattern for lines. The <code>setLineDash</code> method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the <code>lineDashOffset</code> property sets an offset where to start the pattern.</p> -<p>In this example we are creating a marching ants effect. It is an animation technique often found in <span class="new">selection</span> tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">basic animations</a>.</p> +<p>In this example we are creating a marching ants effect. It is an animation technique often found in <span class="new">selection</span> tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations">basic animations</a>.</p> <div class="hidden"> <pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> @@ -663,7 +663,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p> <div class="note"> -<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p> +<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p> </div> <h3 id="A_shadowed_text_example">A shadowed text example</h3> @@ -692,7 +692,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> -<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p> +<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p> <h2 id="Canvas_fill_rules">Canvas fill rules</h2> diff --git a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html index b258301bff..52335c8095 100644 --- a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html @@ -15,15 +15,15 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage <pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> </pre> -<p>{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。<code>src</code> 属性と <code>alt</code> 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} <a href="/docs/Web/API/HTMLCanvasElement">属性</a>を利用できます。 <code>width</code> と <code>height</code> 属性が指定されなかった場合、canvas は幅 <strong>300 ピクセル</strong>、高さ <strong>150 ピクセル</strong>の要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。</p> +<p>{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。<code>src</code> 属性と <code>alt</code> 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} <a href="/ja/docs/Web/API/HTMLCanvasElement">属性</a>を利用できます。 <code>width</code> と <code>height</code> 属性が指定されなかった場合、canvas は幅 <strong>300 ピクセル</strong>、高さ <strong>150 ピクセル</strong>の要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。</p> <div class="note"> <p><strong>付記:</strong> 画像が歪んでいると感じた時は、<code><canvas> </code>の <code>width</code> と <code>height</code> 属性の値を設定して、CSS によるサイズの変更をしないようにしましょう。</p> </div> -<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 属性は <a href="/docs/Web/HTML/Global_attributes">全ての要素が持つ属性</a> で <code><canvas></code> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。</p> +<p><a href="/ja/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 属性は <a href="/ja/docs/Web/HTML/Global_attributes">全ての要素が持つ属性</a> で <code><canvas></code> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。</p> -<p><code><canvas></code> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては<a href="/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">専用のページ</a>を設けています。詳細は、そちらをご覧ください。</p> +<p><code><canvas></code> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">専用のページ</a>を設けています。詳細は、そちらをご覧ください。</p> <div id="section_2"> <h3 id="代替コンテンツ">代替コンテンツ</h3> @@ -43,7 +43,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage </canvas> </pre> -<p>使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a> をご覧ください。</p> +<p>使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a> をご覧ください。</p> <h3 id="<canvas>：閉じタグが必須です"><code></canvas>：</code>閉じタグが必須です</h3> diff --git a/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html b/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html index 65e56da8d4..8a152c0313 100644 --- a/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/ja/web/api/canvas_api/tutorial/compositing/example/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example --- <div>{{CanvasSidebar}}</div> -<p>This sample program demonstrates a number of <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>. The output looks like this:</p> +<p>This sample program demonstrates a number of <a href="/ja/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>. The output looks like this:</p> <p>{{EmbedLiveSample("Compositing_example", "100%", 7250)}}</p> diff --git a/files/ja/web/api/canvas_api/tutorial/finale/index.html b/files/ja/web/api/canvas_api/tutorial/finale/index.html index 735c71c693..9ced4ec521 100644 --- a/files/ja/web/api/canvas_api/tutorial/finale/index.html +++ b/files/ja/web/api/canvas_api/tutorial/finale/index.html @@ -11,7 +11,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div> <div class="summary"> -<p>おめでとう! <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>は終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。</p> +<p>おめでとう! <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>は終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。</p> </div> <h2 id="他の例とチュートリアル">他の例とチュートリアル</h2> @@ -23,7 +23,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <dd>ブラウザ上のフロントエンドディベロッパー向けのプレイグラウンドとコードエディターです。</dd> <dt><a href="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></dt> <dd>Canvas APIsの例です。</dd> - <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dt><a href="/ja/docs/Games">Game development</a></dt> <dd>ゲームは最も人気な活動の一つです。標準に準拠したWebブラウザで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。</dd> </dl> @@ -32,11 +32,11 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <p>これらのAPIはcanvasとグラフィックスを更に動かす際におそらく使われます</p> <dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dt><a href="/ja/docs/Web/WebGL">WebGL</a></dt> <dd>複雑なグラフィックスや3Dを含んだレンダリングのためのアドバンスドなAPIです。</dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dt><a href="/ja/docs/Web/SVG">SVG</a></dt> <dd>スケーラブル・ベクター・グラフィックスを使用すると、スムーズなスケールを行うために描画されるサイズには関係なく、ベクター(ライン)とシェイプのセットとして画像を描画します。</dd> - <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt> + <dt><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio</a></dt> <dd>WebAudioAPIは、Web上のオーディオを制御したり、ディベロッパーがオーディオのリソースを選択したり、エフェクトをオーディオに追加したり、オーディオ・ビジュアライザーを作成したり、空間的エフェクト(音響のような)を適用したり、他にも様々な処理を行うためのオーディオの多目的なシステムを提供します。</dd> </dl> @@ -45,7 +45,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Finale <dl> <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt> <dd>質問のタグは"canvas"となります。</dd> - <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt> + <dt><a href="/ja/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt> <dd>このチュートリアルに対するコメントや感謝の言葉があるなら、是非我々に届けてほしいです。</dd> </dl> diff --git a/files/ja/web/api/canvas_api/tutorial/using_images/index.html b/files/ja/web/api/canvas_api/tutorial/using_images/index.html index bc2940554a..d3d7554a02 100644 --- a/files/ja/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/ja/web/api/canvas_api/tutorial/using_images/index.html @@ -54,7 +54,7 @@ original_slug: Web/Guide/HTML/Canvas_tutorial/Using_images <h3 id="Using_images_from_other_domains" name="Using_images_from_other_domains">ほかのドメインにある画像を使用する</h3> -<p>{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、<code>drawImage()</code> を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">canvas を汚染します</a>。</p> +<p>{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、<code>drawImage()</code> を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると <a href="/ja/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">canvas を汚染します</a>。</p> <h3 id="Using_other_canvas_elements" name="Using_other_canvas_elements">ほかの canvas 要素を使用する</h3> |