HTML5 キャンバス

HTML5 Canvas

canvasとは何か？

HTML5の <canvas> 要素は、グラフィックの描画に使用され、通常JavaScriptを使用して行われます。

<canvas> タグはただのグラフィックコンテナであり、描画はすべてスクリプトで行う必要があります。

canvasを使用して、パス、矩形、円、文字、画像など多くの方法で描画できます。

ブラウザのサポート

元素	Firefox	IE	Chrome	Safari	Opera
`<canvas>`	4.0	9.0	2.0	3.1	9.0

Canvasの作成

Webページでcanvasを作成するには、<canvas>要素を使用します。

注意: <canvas>要素には一般に境界線と内容がありません。

簡単な例

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

注意: タグは通常、スクリプトで参照されるid属性、幅と高さ属性を指定します。

スタイル属性を使用して境界線を追加

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

JavaScriptを使用して画像を描く

canvas要素自体には描画能力がありません。すべての描画作業はJavaScript内で行わなければなりません。

例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

実装解析

まず、<canvas> 要素を見つけます:

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

次に、contextオブジェクトを作成します:

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

次の2行のコードは、赤い矩形を描画します:

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

Canvas座標

canvasは2次元のグリッドです。canvasの左上角の座標は(0, 0)です。

座標例

次の例はcanvasのXおよびY座標を示しています。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 2次元グリッドの例</title>
    <style>
        #myCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<h2>HTML5 Canvas 2次元グリッドの例</h2>
<p>以下はキャンバス上に描かれた2次元グリッドの例です：</p>

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
function drawGrid() {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var gridSize = 50;

    // グリッドの描画
    context.beginPath();
    for (var x = 0; x <= canvas.width; x += gridSize) {
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
    }
    for (var y = 0; y <= canvas.height; y += gridSize) {
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
    }
    context.strokeStyle = "#ddd";
    context.stroke();

    // 座標の描画
    context.font = "10px Arial";
    context.fillStyle = "black";
    for (var x = 0; x <= canvas.width; x += gridSize) {
        for (var y = 0; y <= canvas.height; y += gridSize) {
            context.fillText(`(${x}, ${y})`, x + 5, y + 15);
        }
    }
}

drawGrid();
</script>

</body>
</html>

Canvas - パス

Canvas上に線を描くには、以下の2つのメソッドを使用します:

moveTo(x, y) - 線の開始点を定義
lineTo(x, y) - 線の終点を定義

例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Canvas - 円形

canvasで円を描くには、以下のメソッドを使用します:

arc(x, y, r, start, stop)

例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
 var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

Canvas - テキスト

canvasでテキストを描画するための重要な属性およびメソッド:

font - フォントを定義
fillText(text, x, y) - canvas上に実線のテキストを描く
strokeText(text, x, y) - canvas上に輪郭線のテキストを描く

fillTextを使用

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

strokeTextを使用

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

Canvas - グラデーション

グラデーションは、矩形、円、ライン、テキストなどの形状に塗りつぶすことができます。

createLinearGradient:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

createRadialGradient:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

Canvas - 画像

画像をcanvas上に配置するには、以下のメソッドを使用します:

drawImage(image, x, y)

例

<p>Image to use:</p>
<img id="scream" src="疾走する馬.jpg" alt="The Scream" width="250" height="300"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img. function() {
	ctx.drawImage(img,10,10);
} 
</script>

HTML Canvas 参考マニュアル

タグの完全な属性は、Canvas 参考マニュアルを参照してください。

HTML `<canvas>` タグ

タグ	説明
<canvas>	HTML5のcanvas要素は、JavaScriptを使用してWebページに画像を描画します。

QA セクション

Q1: `<canvas>` タグの主な目的は何ですか？

A1: <canvas> タグの主な目的は、スクリプト（通常はJavaScript）を使用してWebページ上にグラフィックを描画することです。

Q2: `fillStyle` プロパティのデフォルトの設定は何ですか？

A2: fillStyle プロパティのデフォルト設定は#000000（黒）です。

Q3: どうやってcanvas上に線を描くことができますか？

A3: canvas上に線を描くには、まずmoveTo(x, y)メソッドで線の開始点を定義し、次にlineTo(x, y)メソッドで線の終点を定義し、最後にstroke()メソッドを使用して線を描きます。