Canvas を使用すると何ができるかについて簡単に説明します。

この記事の内容は、Canvas の使用法について簡単に説明することです。困っている友人は参考にしていただければ幸いです。

canvas何ができるのですか?

Canvas は HTML5 の新しい要素で、JavaScript を使用してグラフィック、アイコンなどを描画できます。その他のビジュアルイメージ。画像効果やアニメーションの作成にも使用できます。コマンドの完全なセットをマスターすると、キャンバスを使用してリッチな Web アプリケーションを作成できます。 Canvasを使いこなすには、まずJavaScriptをしっかり使いこなす必要があります。 [おすすめの関連ビデオチュートリアル: JavaScript チュートリアル]

canvastag

<canvas width="400" height="300">
</canvas>

もちろん、これを使用して設定することもできます。 css 確かに！幅と高さを設定しない場合、デフォルトの幅と高さは 300*150 になります。

下位バージョンのブラウザの場合は、フィードバックする必要がある情報を Canvas タグの間に入れます。

<canvas width="400" height="300">
    <p>你想看我，就升级浏览器吧！</p>
</canvas>

コンテキストを取得します。すべてのペイント操作はコンテキスト内で行われます。現在は 2D のみをサポートしています。

window.onad=function(){    
     var canvas = document.getElementById("myCanvas");    
     var context= can.getContext("2d");
}

Retina の場合ディスプレイ

キャンバスを Retina と標準解像度のディスプレイに鮮明に表示するのは非常に簡単です。画面を通過するだけです。ただ掛けるだけです。比率はキャンバスのピクセル密度によって決まります。まず、ピクセル値がキャンバスにどのように保存されるかを理解する必要があります。

バッキング ストレージは、キャンバス上にデータを保存する各ピクセルのカラー値です。私たちの目標は、キャンバスに表示されるピクセルごとにバック ストアに 1 つのピクセルを配置することです。ピクセルが画面にプッシュされる前に、その値がここで計算されます。ただし、バッキング メモリで表現されるピクセル数は、画面にプッシュされるピクセル数と等しくない場合があります。 Retina デバイスでは、他の HTML 要素に対して一貫したサイズと位置を維持するために、キャンバスの幅と高さが 2 倍になり、その結果、キャンバスが引き伸ばされてコンテンツが見えにくくなります。この伸びに対処するには、必要に応じて背面収納の幅と高さを 2 倍にする必要があります。

ラスター イメージまたはビデオ データを処理している場合は、「Retina ディスプレイのピクセル処理」のためにキャンバスをさらに最適化する方法を確認してください。いずれの場合も、キャンバスを大きくすることは有益ではないため、[最適化] を選択する必要があります。キャンバスは Retina デバイス用です。まず、キャンバスをレンダリングしているモニターが本当に Retina 対応であることを確認してください。その場合は、デバイスのピクセル比に従ってバッキング ストアをスケーリングします。

一方で、Retina デバイスのピクセル比は 2 です。これは、x 方向と y 方向における表示ピクセルとバッキング ストレージ ピクセルの比率が 2:1 であるためです。一方、標準解像度モニターは、1 つのバッキング ストレージ ピクセルを 1 つの表示ピクセルにマッピングするため、デバイスのピクセル比は常に 1 になります。

JavaScript では、フォールバック率係数を決定できます。まず、ブラウザに window.devicePixelRatio が定義されているかどうかを確認します。デバイスのピクセル比が 1 より大きい場合、ユーザーは Retina ディスプレイを使用しています。適切なバックアップ率を決定するコードは次のとおりです。

window.onload=function(){
       var canvas = document.getElementById("myCanvas");
      var context= canvastContext("2d");
       var scaleFactor = backingScale(ctx);
       if (scaleFactor > 1) {
              canvas.width = canvas.width * scaleFactor;
              canvas.height = canvas.height * scaleFactor;
              // update the context for the new canvas scale
              var context = canvas.getContext("2d");
       }
}
 function backingScale(context) {
              if ('devicePixelRatio' in window) {
                     if (window.devicePixelRatio > 1) {
                            return window.devicePixelRatio;
                     }
              }
              return 1;

}

概要: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がCanvas を使用すると何ができるかについて簡単に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。