キャンバスってどういう意味ですか？

キャンバスとはどういう意味ですか?

Canvas は英語で「キャンバス」を意味しますが、ここでいう Canvas は HTML5 の新しい要素で、開発者はこの上に一連のグラフィックを描画できます。 HTML ファイルでの Canvas の記述方法は非常に簡単です:

<canvas id="canvas" width="宽度" height="高度"></canvas>

id ​​属性はすべての HTML 要素で使用できます。Canvas に付属する唯一の属性は最後の 2 つ (幅と高さをそれぞれ制御)、および他にはありません。互換性についてCanIUseは、現在ユーザーが使用しているブラウザの90％で基本機能がサポートされており、ほとんどの場合安心して利用できるとしている。

Canvas に付属する幅と高さのプロパティを使用する必要があり、CSS を使用して制御しないでください。CSS 制御によって Canvas が変形するためです。 PhptpShopと比較してみると、後者は「画像サイズ」を変更しますが、前者は「キャンバスサイズ」を変更するのが正しい方法です。たとえば、下の画像は 3 つの画像を水平につなぎ合わせたもので、左端の黒いボックスはサイズ 50px * 50px の元の画像で、中央は画像サイズを 100px * 100px に変更した結果です。ぼやけてしまいますが、画像自体は座標範囲が大きくなったわけではなく、一番右が正しい100px * 100px Canvasです。

Canvas ほとんどの描画メソッドは タグとは関係がなく、それらを操作するには JavaScript が必要です。これはいわゆる Canvas API です。

最初にこの要素を取得します:

var canvas = document.getElementById('canvas');

次に、すべての Canvas API を呼び出すことができる入り口を取得するメソッドを使用します:

var ctx = canvas.getContext('2d');

ほら、3Dあるの？ 3D を記述する方法はありませんが、3D 世界への扉を開きたい場合は、canvas.getContext('webgl') を記述することができます。ただし、WebGL は OpenGL ES 2.0 に基づく一連の標準であり、この記事とはまったく異なるため、ここでは説明しません。

以上がキャンバスってどういう意味ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。