HTML <canvas>要素は、Webページ上のグラフィックスを描画するために使用されます。
左のグラフィックが使用して作成された<canvas> 。 赤い長方形、勾配矩形、多色の四角形、および多色テキスト：これは、4つの要素を示します。
HTMLは何であるCanvas ？
HTML <canvas>要素は、スクリプトを経由して、その場で、グラフィックスを描画するために使用されている(usually JavaScript)
<canvas>要素は、グラフィックスのための唯一のコンテナです。 あなたが実際にグラフィックスを描画するためにスクリプトを使用する必要があります。
Canvasパス、ボックス、円、テキストを描画し、画像を追加するためのいくつかの方法を有しています。
キャンバス要素はHTML5の一部であり、2次元形状とビットマップ画像の動的スクリプトのレンダリングを可能にします。 これは、ビットマップを更新し、内蔵のシーングラフを持っていない低レベル、手続き型モデルです。
ブラウザのサポート
表中の数字は完全にサポートする最初のブラウザのバージョンを指定<canvas>要素を。
| 素子 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
歴史
キャンバスは最初にDashboardウィジェットやSafariブラウザのような2004給電用途で自分のMac OS XのWebKitのコンポーネント内で使用するためにAppleが導入されました。
その後、2005年には、2006年のGeckoブラウザ、オペラのバージョン1.8で採用された、次世代のWeb技術のための新しい提案の仕様上のWebハイパーテキスト応用技術ワーキンググループ（WHATWG）によって標準化されました。
使用法
キャンバスには、高さと幅の属性を持つHTMLコードで定義された描画可能領域からなります。 JavaScriptコードは、このように動的に生成されたグラフィックスを可能にする、他の一般的な2DのAPIと同様の描画機能のフルセットを介してエリアにアクセスすることができます。
キャンバスのいくつかの予想される用途は、建物のグラフ、アニメーション、ゲーム、画像合成が含まれます。
Canvasの例
canvas HTMLページ上の矩形領域です。 デフォルトでは、 canvas何の境界線とコンテンツがありません。
マークアップは次のようになります。
<canvas id="myCanvas" width="200" height="100"></canvas>
Note:必ずid属性を指定する(to be referred to in a script) 、および幅と高さのサイズを定義する属性canvas 。
境界線を追加するには、使用style属性を：
基本的なCanvas例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> »それを自分で試してみてください JavaScriptで描画
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); »それを自分で試してみてください 線を引きます
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); »それを自分で試してみてください 円を描きます
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); »それを自分で試してみてください テキストを描画
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); »それを自分で試してみてください ストロークテキスト
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); »それを自分で試してみてください 線形グラデーションを描きます
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); »それを自分で試してみてください 円形グラデーションを描きます
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); »それを自分で試してみてください イメージを描画
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); »それを自分で試してみてください HTML Canvasのチュートリアル
HTMLについてのすべてを学ぶために<canvas> 、 私たちの完全なHTML訪問Canvasのチュートリアルを 。