2024/03/07 時点の英語版に基づき新規作成

localer · Jul 11, 2024 · 6bbe6d0 · 6bbe6d0
1 parent 5d2cfbd
commit 6bbe6d0
Showing 1 changed file with 36 additions and 31 deletions.
diff --git a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -1,6 +1,8 @@
 ---
 title: キャンバスの基本的な使い方
 slug: Web/API/Canvas_API/Tutorial/Basic_usage
+l10n:
+  sourceCommit: c8b447485fd893d5511d88f592f5f3aec29a725b
 ---
 
 {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
@@ -21,11 +23,11 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 
 `<canvas>` 要素は通常の画像と同じようにスタイル付けすることができます（{{cssxref("margin")}}、{{cssxref("border")}}、{{cssxref("background")}} など）。しかし、これらのルールは、実際にキャンバス上に描画されるものには影響しません。これをどう扱うかについては、このチュートリアルの[専用の章](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)で紹介します。スタイルのルールが何も適用されていない場合、キャンバスは完全に透明なものとして描画されます。
 
-### 代替コンテンツ
+### アクセシブルコンテンツ
 
-`<canvas>` 要素は {{HTMLElement("img")}} タグとは異なり、 {{HTMLElement("video")}}、{{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素のように、未対応の古いブラウザー（Internet Explorer 9 以前など）やテキストのブラウザーで表示される代替コンテンツを設定するのは簡単です。これらのブラウザーで表示される代替コンテンツを常に設定してください。
+`<canvas>` 要素は、{{HTMLElement("img")}}、{{HTMLElement("video")}}、{{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素と同様に、メディアが読み込まれなかったり、ユーザーが意図通りに使いこなすことができなかったりした場合に表示される代替テキストを提供することで、アクセシビリティを確保しなければなりません。その種類のメディアに合った代替コンテンツ、キャプション、代替テキストを常に提供しなければなりません。
 
-代替コンテンツを提供する方法はとても直観的です。代替コンテンツを `<canvas>` の中に入れるだけです。 `<canvas>` に対応していないブラウザーはこのコンテナーを無視し、内部の代替コンテンツを表示します。 `<canvas>` に対応しているブラウザーは、ふつうコンテナー内のコンテンツを無視し、通常通りキャンバスを描画します。
+代替コンテンツを提供する方法はとても直観的です。`<canvas>` 要素の中にコンテンツを挿入するだけで、画面リーダーやスパイダー、他にも自動化されたボットがアクセスします。既定では、ブラウザーはコンテナーの中にあるコンテンツを無視し、`<canvas>` が対応していない場合を除き、キャンバスを正常にレンダリングします。
 
 例えば、キャンバスの内容を説明するテキストを提供したり、動的に描画されるコンテンツの静的な画像を提供したりすることができます。次のようになります。
 
@@ -35,17 +37,17 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 </canvas>
 
 <canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt="" />
+  <img src="images/clock.png" width="150" height="150" alt="時計" />
 </canvas>
 ```
 
-キャンバスに対応した別なブラウザーを使用するようにユーザーに指示することは、例えばキャンバスを見ることができないユーザーにとって助けになりません。有用な代替テキストやサブ DOM を提供することは、キャンバスのアクセシビリティを向上させます。
+キャンバスに対応しているさまざまなブラウザーで使用するように指示しても、キャンバスをまったく読めないユーザーの助けにはなりません。有益な代替テキストまたは部分 DOM を使用することで、アクセスできない要素にアクセシビリティが追加されます。
 
 ### `</canvas>` タグが必要
 
 代替コンテンツを内部に持つ関係上、 {{HTMLElement("img")}} 要素と異なって {{HTMLElement("canvas")}} 要素は閉じタグ (`</canvas>`) が**必須**です。タグを閉じなかった場合は、残りのページ全てが代替コンテンツと見なされ、結果として表示されなくなります。
 
-代替コンテンツが必要でない場合は、単に `<canvas id="foo" ...></canvas>` とすれば対応するブラウザーですべて利用することができます。
+代替コンテンツが必要でない場合は、単に `<canvas id="foo" role="presentation" …></canvas>` とすれば対応するブラウザーですべて利用することができます。これはキャンバスが純粋に表現目的である場合にのみ使用しましょう。
 
 ## 描画コンテキスト
 
@@ -54,8 +56,8 @@ slug: Web/API/Canvas_API/Tutorial/Basic_usage
 初期状態ではキャンバスは空です。何かを表示するには、まずスクリプトで描画コンテキストを取得する必要があります。 {{HTMLElement("canvas")}} 要素には {{domxref("HTMLCanvasElement.getContext", "getContext()")}} というメソッドがあり、描画コンテキストを取得したり描画機能を呼び出したりするのに使います。 `getContext()` には 1 つの引数があり、コンテキストの種類を指定します。このチュートリアルで扱っているような二次元のグラフィックでは、 `"2d"` を指定すると {{domxref("CanvasRenderingContext2D")}} を取得することができます。
 
 ```js
-var canvas = document.getElementById("tutorial");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("tutorial");
+const ctx = canvas.getContext("2d");
 ```
 
 スクリプトの最初の行では、 DOM 内から {{HTMLElement("canvas")}} 要素を表すノードを取得するために {{domxref("document.getElementById()")}} メソッドを呼び出しています。要素のノードを取得したら、 `getContext()` メソッドを使用して描画コンテキストにアクセスすることができます。
@@ -65,10 +67,10 @@ var ctx = canvas.getContext("2d");
 {{HTMLElement("canvas")}} 要素に対応していないブラウザーでは、代替コンテンツが表示されます。スクリプトからは、 `getContext()` メソッドの有無を調べることで、ブラウザーが対応しているかどうかを確認することができます。確認するためのコードは以下のようになります。
 
 ```js
-var canvas = document.getElementById("tutorial");
+const canvas = document.getElementById("tutorial");
 
 if (canvas.getContext) {
-  var ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext("2d");
   // 描画するコードをここに
 } else {
   // キャンバスに未対応の場合のコードをここに
@@ -83,26 +85,27 @@ if (canvas.getContext) {
 
 ```html
 <!doctype html>
-<html>
+<html lang="ja">
   <head>
     <meta charset="utf-8" />
     <title>Canvas tutorial</title>
-    <script>
-      function draw() {
-        var canvas = document.getElementById("tutorial");
-        if (canvas.getContext) {
-          var ctx = canvas.getContext("2d");
-        }
-      }
-    </script>
     <style>
       canvas {
         border: 1px solid black;
       }
     </style>
   </head>
-  <body onload="draw();">
+  <body>
     <canvas id="tutorial" width="150" height="150"></canvas>
+    <script>
+      function draw() {
+        const canvas = document.getElementById("tutorial");
+        if (canvas.getContext) {
+          const ctx = canvas.getContext("2d");
+        }
+      }
+      window.addEventListener("load", draw);
+    </script>
   </body>
 </html>
 ```
@@ -111,40 +114,42 @@ if (canvas.getContext) {
 
 ここでは、テンプレートが実際にどのように見えるかを説明します。このように、最初は白紙の状態です。
 
-{{EmbedLiveSample("A_skeleton_template", 160, 160)}}
+{{EmbedLiveSample("A_skeleton_template", "", "160")}}
 
 ## 単純な描画
 
 まず始めに、交差する 2 つの矩形を描き、そのうちの 1 つにアルファ透過をさせる簡単な例を見てみましょう。これがどのように機能するかは、後の例でさらに詳しく見ていきましょう。
 
 ```html
 <!doctype html>
-<html>
+<html lang="ja">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
+    <title>キャンバスの実験</title>
+  </head>
+  <body>
+    <canvas id="canvas" width="150" height="150"></canvas>
     <script type="application/javascript">
       function draw() {
-        var canvas = document.getElementById("canvas");
+        const canvas = document.getElementById("canvas");
         if (canvas.getContext) {
-          var ctx = canvas.getContext("2d");
+          const ctx = canvas.getContext("2d");
 
-          ctx.fillStyle = "rgb(200, 0, 0)";
+          ctx.fillStyle = "rgb(200 0 0)";
           ctx.fillRect(10, 10, 50, 50);
 
-          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+          ctx.fillStyle = "rgb(0 0 200 / 50%)";
           ctx.fillRect(30, 30, 50, 50);
         }
       }
+      draw();
     </script>
-  </head>
-  <body onload="draw();">
-    <canvas id="canvas" width="150" height="150"></canvas>
   </body>
 </html>
 ```
 
 この例は次のように動作します。
 
-{{EmbedLiveSample("A_simple_example", 160, 160, "canvas_ex1.png")}}
+{{EmbedLiveSample("A_simple_example", "", "160")}}
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}