Canvasとは、HTML5から新しく追加される図形を描くための技術仕様で、
HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画します。
JavaScript以外のスクリプトでも描画可能ですが、ほとんどの場合JavaScriptが標準的に利用されています。
Canvasでは、JavaScriptを使用してCanvasの技術仕様に定められた書式で描画内容を指定することで、
四角形や円をはじめとする様々な図形の描画、それらの変形、グラデーションを含む色や背景などのスタイル、
画像やテキストとの合成などの表現が可能となります。
Canvasは、図形をスクリプトで指定する点に特徴があります。
スクリプトで図形を描くため、多くの場合、画像に比べてデータ量を軽くすることができるでしょう。
また、図形を画像で作成すると、ユーザーがいつアクセスしても常に同じ画像が表示されることになりますが、
Canvasの場合、サーバーで動的にスクリプトソースを生成すれば、
ユーザーのアクセスごとに異なる図形を表示させることが可能となります。
例えば、ユーザーがアクセスした時点でのリアルタイムのデータを反映したグラフの描画などが可能になるでしょう。
他にも、ユーザーのアクセスごとにランダムに変化するグラデーション表現や、
タイマーと組み合わせることで刻一刻と変形するアニメーションなども作成することができます。
アイデア次第で、今まで画像では実現することが難しかった様々な表現が可能になりそうです。
Canvasは、Internet Explorer9以上、Firefox1.5以上、Opera9以上、Google Chrome、Safariなどでサポートされています。
以下は、W3Cのウェブサイトに掲載されているCanvasによる作成例です。
HTMLの<canvas>要素とスクリプトだけで作成されており、
Flashなどのプラグインや画像は一切使用されていません。
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pretty Glowing Lines</title>
</head>
<body>
<canvas width="800" height="450"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>
</body>
</html>