A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/canvas below:

<canvas>: グラフィックã‚ãƒ£ãƒ³ãƒã‚¹è¦ç´ - HTML | MDN

<canvas>: グラフィックキャンバス要素

Baseline Widely available

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

属性

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

height

CSS ピクセルで示した座標空間の高さ。既定では 150 ピクセルに設定されています。

moz-opaque 非標準 非推奨;

canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された canvas.getContext('2d', { alpha: false }) を使用してください。

width

CSS ピクセルで示した座標空間の幅。既定では 300 ピクセルに設定されています。

使用上の注意 代替コンテンツ

<canvas> のブロックの中で、代替コンテンツを提供すべきです。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。

</canvas> タグが必要

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

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

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

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

キャンバスの最大寸法

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

ブラウザー 最大高 最大幅 最大面積 Chrome 32,767 pixels 32,767 pixels 268,435,456 pixels (つまり 16,384 x 16,384) Firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (つまり 22,528 x 20,992) Safari 32,767 pixels 32,767 pixels 268,435,456 pixels (つまり 16,384 x 16,384) IE 8,192 pixels 8,192 pixels ?

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

例 HTML

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

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

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

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
結果 アクセシビリティの考慮 代替コンテンツ

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

仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4