Canvas Javascript API が主要なブラウザでどのように動作するか

キャンバス JavaScript API は、Web 上でグラフィックを作成および操作するための強力なツールです。 JavaScript コードを使用して 2D グラフィックを描画でき、ほとんどの最新の Web ブラウザでサポートされています。ゲーム操作、アニメーション、ビデオ処理などはすべて Canvas API から提供されます。

キャンバス API は、HTML ドキュメント内に配置できる HTML 要素である Canvas 要素の形式で実装されます。 Canvas 要素は描画面として機能し、CSS を使用してスタイルを設定したり配置したりできます。

キャンバス上にグラフィックを描画するには、arc、lineTo、fillRect などのキャンバス API の描画メソッドを使用できます。これらのメソッドを使用すると、キャンバス上に図形、線、その他のグラフィックを描画できます。

Canvas API のブラウザサポート

Google Chrome と Mozilla Firefox は、キャンバス API をサポートする主なブラウザです。 Canvas API では Safari または Microsoft Edge を決して使用しないでください。キャンバス API は、Internet Explorer を除くすべての主要なブラウザでサポートされています。

Canvas は、Windows、Linux、Mac、Android、iOS とすべての主要なブラウザで利用できます。オペレーティング システムは、キャンバス API が適切に動作することを確認するために、すべてのセキュリティ チェックとアップグレードを実行する必要があります。以下に、そのようなブラウザとそのバージョンのリストを示します。

＃＃＃＃＃＃クロム＃＃＃＃＃＃

• Firefox、ただし拡張バージョンはサポートされていません

＃＃＃＃＃＃角＃＃＃＃＃＃

• Respondus Lockdown ブラウザは、最新のシステム要件のみをサポートします。

• Safari は Macintosh のみ

• 少なくとも 1GB の RAM を搭載したシステムは、キャンバス API の使用に適しています。ネイティブ モバイル ブラウザーはタブレット デバイスをあまりサポートしていません。デフォルトの Android ブラウザはモバイル デバイスに応じて異なります。

モバイルブラウザ

• iOS

Safari はデフォルトのブラウザであり、Canvas のサポートは限定的です。

＃＃＃クロム＃＃＃

Photon Flash Player は Flash をサポートします

＃＃＃アンドロイド＃＃＃

Chrome はデフォルトのブラウザであり、Canvas のサポートは限定的です

Firefox ブラウザ

＃＃＃スクリーンリーダー＃＃＃

最新バージョンの Safari での Macintosh VoiceOver
最新バージョンの Firefox の PC 用 JAWS
PC NNVDA (Firefox の最新バージョン)

Chrome はキャンバスでのスクリーン リーダーをサポートしていません。

• Canvas API ブラウザでサポートされているコードを検出する

Canvas は HTML 5 要素です。 Canvas の getContext() メソッドは描画コンテキストを返します。 null が返された場合は、canvas 要素がサポートされていないことを意味します。

• ユーザーは、以下の構文に従い、以下のコードを使用して、ブラウザーが Canvas 要素をサポートしているかどうかを確認できます。

  ＃＃＃文法＃＃＃ リーリー
構文内の if 条件は、canvas 要素を作成し、コンテキストの取得を試みます。コンテキストが返された場合、ブラウザはキャンバスをサポートします。
• ＃＃＃例＃＃＃

  このプログラムでは、ユーザーはボタンをクリックすることでキャンバスのブラウザーのサポートを確認できます。ボタンをクリックすると、イベントは上記の構文を使用してキャンバス コンテキストを取得しようとする関数を呼び出します。プログラムには、ブラウザのサポートを区別し、ユーザーにメッセージを表示するフラグ変数があります。

  リーリー ＃＃＃例＃＃＃
これは、キャンバス API を使用してキャンバス上に単純な円を描画する方法の例です -

リーリー

この例では、作成された Canvas 要素の ID は「myCanvas」、幅と高さはそれぞれ 200 ピクセルと 100 ピクセルです。 getContext メソッドを使用してキャンバスの描画コンテキストを取得し、arc メソッドを使用して中心点 (95, 50)、半径 40 ピクセルの円を描画します。次に、ストローク メソッドを使用して、キャンバス上に円を描画します。

このチュートリアルは、Canvas API がすべての主要なブラウザーに組み込まれたネイティブ部分であるかどうかを理解するのに役立ちます。すべての主要なブラウザにキャンバス API が組み込まれているわけではありません。これで、ブラウザーの Canvas API サポートを検出するコードがわかりました。ユーザーは、このチェック用のコード スニペットによってサポートされている以前のブラウザを使用してキャンバスをコーディングする際のエラーを回避できます。

以上がCanvas Javascript API が主要なブラウザでどのように動作するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。