HTML5 Canvas

canvas 要素は、Web ページ上にグラフィックを描画するために使用されます。

キャンバスとは何ですか?

HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に画像を描画します。

キャンバスは、すべてのピクセルを制御できる長方形の領域です。

キャンバスには、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

キャンバス要素を作成する

キャンバス要素を HTML5 ページに追加します。

要素の ID、幅、高さを指定します。

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript による描画

canvas 要素自体には描画機能がありません。 すべての描画作業は JavaScript 内で行う必要があります。

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript は id を使用して Canvas 要素を検索します。

var c=document.getElementById("myCanvas");

次に、コンテキストオブジェクトを作成します。：

var cxt=c.getContext("2d"); 

getContext("2d") オブジェクトは、パス、矩形、円、文字、画像の追加など、さまざまな描画メソッドを持つHTML5内蔵オブジェクトです。

次の2行のコードで、赤い四角形を描きます：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

fillStyleメソッドで赤色に着色し、fillRectメソッドで形状、位置、大きさを指定しています。

座標を理解する

。

上記のfillRectメソッドは、パラメータ(0,0,150,75)を持っています。

意味：キャンバス上に、左上の角(0,0)から始まる150×75の矩形を描きます。

キャンバスのX座標とY座標は、以下のようにキャンバス上の描画の位置決めに使用されます。

例：矩形にカーソルを合わせると、座標が表示されます。

その他の Canvas インスタンス

以下の Canvas 要素にペイントする例をさらに示します:

例 - 行

開始位置と終了位置を指定して線を描画します:

JavaScript コード：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

canvas エレメント：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

自分で試してみてください

例 - 円

サイズ、色、位置を指定して円を描画します。

JavaScript コード:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

canvas エレメント：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

自分で試してみてください

例 - グラデーション

指定した色を使用してグラデーションの背景を描画します:

JavaScript コード:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

canvas エレメント：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

自分で試してみてください

例 - 画像

画像をキャンバスに配置します:

JavaScript コード:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

canvas エレメント：

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

自分で試してみてください