From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/canvas/index.html | 201 ++++++++++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 files/ja/web/html/element/canvas/index.html (limited to 'files/ja/web/html/element/canvas') diff --git a/files/ja/web/html/element/canvas/index.html b/files/ja/web/html/element/canvas/index.html new file mode 100644 index 0000000000..4bc12f67ca --- /dev/null +++ b/files/ja/web/html/element/canvas/index.html @@ -0,0 +1,201 @@ +--- +title: ': グラフィックキャンバス要素' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - HTML scripting + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +
{{HTMLRef}}
+ +

HTML の <canvas> 要素 と Canvas スクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 知覚可能コンテンツ
許可されている内容透過的コンテンツ、ただし子孫に対話型コンテンツのうち {{HTMLElement("a")}} 要素, {{HTMLElement("button")}} 要素, {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}} 属性が checkbox, radio, button のいずれか以外を含まないもの
タグの省略{{no_tag_omission}}
許可されている親要素記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLCanvasElement")}}
+ +

属性

+ +

他のすべての HTML 要素と同様に、グローバル属性を持ちます。

+ +
+
{{htmlattrdef("height")}}
+
CSS ピクセルで示した座標空間の高さ。既定では150ピクセルに設定されています。
+
{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}
+
canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} を使用してください。
+
{{htmlattrdef("width")}}
+
CSS ピクセルで示した座標空間の幅。既定では300ピクセルに設定されています。
+
+ +

使用上の注意

+ +

代替コンテンツ

+ +

<canvas> のブロックの中で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。有用な代替テキストやサブ DOM のヘルプを提供すると、キャンバスがよりアクセシブルになります。

+ +

</canvas> タグが必要

+ +

{{HTMLElement("img")}} 要素とは異なり、 {{HTMLElement("canvas")}} 要素は終了タグ (</canvas>) が必要です。

+ +

CSS と HTML におけるキャンバスの寸法指定の違い

+ +

表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。

+ +

キャンバスの寸法は、 HTML または JavaScript を用いて width および height 属性を <canvas> 要素に直接設定するした方がいいでしょう。

+ +

キャンバスの最大寸法

+ +

<canvas> 要素の最大寸法はとても広いのですが、正確な寸法はブラウザーに依存します。以下のものは様々なテストやその他の情報源 (Stack Overflow など) から収集したいくらかのデータです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー最大高最大幅最大面積
Chrome32,767 pixels32,767 pixels268,435,456 pixels (つまり 16,384 x 16,384)
Firefox32,767 pixels32,767 pixels472,907,776 pixels (つまり 22,528 x 20,992)
Safari32,767 pixels32,767 pixels268,435,456 pixels (つまり 16,384 x 16,384)
IE8,192 pixels8,192 pixels?
+ +
+

注: 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。

+
+ +

例

+ +

HTML

+ +

このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。

+ +
<canvas width="300" height="300">
+  キャンバスの表示内容を説明する代替テキストです。
+</canvas>
+
+ +

JavaScript

+ +

それから JavaScript コード内で {{domxref("HTMLCanvasElement.getContext()")}} を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。

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

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

アクセシビリティの考慮

+ +

代替コンテンツ

+ +

canvas 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツには、セマンティック HTML のようなアクセシビリティツールには公開されていません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.canvas")}}

+ +

関連情報

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