canvasとは
canvasは、動的なグラフィックスや図形、アニメーションを描画するためのHTMLタグです。
Webページ上に、図形・グラフ・イメージ・文字などを描画できます。
また、JavaScriptを使用することで、リアルタイムに動的グラフィックスを描画したり、アニメーションを作成できます。
次のようなJavaScriptコードで、canvasを使用できます。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>このSAMPLEでは、idが「myCanvas」のcanvas要素が作成されます。
次に、getContextメソッドで、2D描画コンテキストを取得します。
fillStyleプロパティを設定して、四角形を塗りつぶす色を設定します。
最後に、fillRectメソッドで、四角形を描画しています。
基本的な図形を描画する
円の描画
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>線の描画
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>文字の描画
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World!", 10, 50);
</script>後から書く
window上にcanvasを用意しておき、そこに後から描画することができます。
JavaScriptによって、図形や文字の描画を動的に行うことができるからです。
例えば、マウスがクリックされた場所に円を描画できます。
<style>
canvas {
background-color: pink;
}
</style>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener("click", function(event) {
var x = event.clientX;
var y = event.clientY;
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fill();
});
</script>See the Pen canvasマウスがクリックされた場所に円を描画する by MacLove (@maclove1) on CodePen.
このように、JavaScriptを使用することで、canvasへの図形描画を動的に行えます。また、setIntervalやrequestAnimationFrameというメソッドで、アニメーションを作成することもできます。
アニメーション
アニメーションは「描画処理」を繰り返し行うことで実現します。
setIntervalで、指定ミリ秒ごとに繰り返し処理を実行します。
例えば、ボールが自由落下するようなアニメーションは以下のようになります。
<style>
canvas {
background-color: pink;
}
</style>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 0;
var vy = 5;
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fill();
y += vy;
}, 50);
</script>See the Pen canvas自由落下する円 by MacLove (@maclove1) on CodePen.
clearRectメソッドで、一度画面を消去して、前の描画を消しています。
描画の後に、座標を変更することで、次の描画位置が変わるため、動いているように見えます。
昔のホームページにあったような、動く文字を作ってみた
<style>
canvas {
background-color: black;
}
</style>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "32px Arial"; // フォント
ctx.textAlign = "center"; // 横方向の位置
ctx.textBaseline = "middle"; // 縦方向の位置
ctx.fillStyle = "#8cff6f"; // 文字色
var x = 0; // x座標
// 文字を左から右に動かすアニメーション（画面クリア、文字を描画、文字の位置を変更する処理を繰り返し行う）
// setIntervalで、100ミリ秒ごとに処理を実行する
setInterval(function() {
// 以前の描画を消去
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 文字を描画する（文字, x座標, y座標）
ctx.fillText("Hello World!", x, canvas.height / 2);
// x座標に加算する
x += 10;
// 左端までいったらx座標を初期化する
if (x > canvas.width + 100) {
x = 0;
}
}, 100);
</script>